Change child component in React via ref or prop?

Question

Say I have a child component. Let's say I want to change its height based on information that the parent has.

If I get a reference to it. I can change it with

myChild.changeHeight(newHeight);

(see React.js - access to component methods)

or I could change it with

<Child height={newHeight}/>

Both could be changed in the render() method. But which one should I use?

Use a prop, that's the standard way to do it, otherwise it looks like a bad hack — Axnyff, Feb 22 '18 at 17:22

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

React team gave few scenarios where we should be using refs.

There are a few good use cases for refs:

Managing focus, text selection, or media playback.

Triggering imperative animations.

Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

If there is a possibility to do some functionality even without using refs, then go ahead and do it. In your case, as you said, you have a way to do it by passing a prop. It would be better if we use props itself rather than ref.

Change child component in React via ref or prop?

1 Answers1