Programming
EN
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

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
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.

1920 x 1080, 71.4 KB, JPG
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.

1920 x 1080, 69.7 KB, JPG
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?
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?
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
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.
