const ChildComponent = forwardRef((props, ref) => { const [text, setText] = useState('john doe'); useImperativeHandle(ref, () => ({ funcToBeExposed: () => console.log('children function called' + text) }), [text]), return <div />; });

// Parent component const ParentComponent = () => { const childRef = useRef(null); const handleReset = () => { if (childRef.current) { childRef.current.funcToBeExposed(); } }; return ( <div> <ChildComponent ref={childRef} /> </div> ); };

2 min read

I did not know this from React until now

So great to have it now, one more tool added to the box

Share via

Posted by

TThức Trần

Posted on

Updated on

I've been working with React for about 2 professional years but have never known about this until recent. Since I had a chance to apply this 'new' thing, I'm sharing now with you.

The contextThe context

I was trying to fix a defect that I was so unsure about how to fix it with the current implementation. That is, some of the inner components were not working as expected.

The issue that I was facing is that the "Clear all" button cannot clear the state of the pop-up window (Category 2 filters).

It seems easy. Yes, but not. I'm dealing with an existing application with existing implementation that are now in production, and the current implementation doesn't function properly in this case. I cannot toss everything up.

So, I was thinking about an approach that whether it is possible or not to control the state of the pop-up window from parent.

Via a ref? This is very common.
Redux state, useContext? Maybe.

But I found another way from my friend - ChatGPT.

Ok, it may not be new to you, but it is truly something new to me after years working with React.

What is useImperativeHandle?What is useImperativeHandle?

It's a hook, obviously.

And it is used when we need to call child component's method (and variable - not recommended as the parent may receive old values - it won’t update reactively in the parent).

How to use useImperativeHandle?How to use useImperativeHandle?

First, modify the child component to be able to receive a ref with forwardRef.

jsx


const ChildComponent = forwardRef((props, ref) => {
  return <div />;
});

Next, use useImperativeHandle in this child component and define the function that will be exposed to the parent component

jsx


const ChildComponent = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({
    funcToBeExposed: () => console.log('children function called')
  }));

  return <div />;
});

In case the function to be exposed need to be updated based on a certain condition, we can use dependencies array.

jsx


const ChildComponent = forwardRef((props, ref) => {
  const [text, setText] = useState('john doe');

  useImperativeHandle(ref, () => ({
    funcToBeExposed: () => console.log('children function called' + text)
  }), [text]), 

  return <div />;
});

Finally, in the parent component, create a ref and pass it to the child component.

jsx


// Parent component
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleReset = () => {
    if (childRef.current) {
      childRef.current.funcToBeExposed();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
    </div>
  );
};

Parent component can trigger child component's method by calling via a ref

Do you think it is straightforward?

ConclusionConclusion

In programming, there may be more than one solution to an issue, the most common one is not always applicable and could be used. The way we do more, the way we learn more, that's what I believe.

And so grateful to be in the environment where we can actually learn something.

men's black long-sleeved top — Photo by Philippe Bout on Unsplash

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on