useimperativehandle

Let's build a case Imagine you have a counter—a classic, simple counter component. function Counter(){ const [counter, setCounter] = useState(0) const handleIncrement = ()=> setCounter(counter + 1) return ( <> <p>Counter: {counter}</p> <button onClick={handleIncrement}>Inc</button> </> ) } function App(){ return ( <> <Counter /> </> ) } Enter fullscreen mode Exit fullscreen mode Now, for some reason, you're asked to add a second button that increments the counter but is placed somewhere far away from the Counter component—although still on the same screen. There are a few options to achieve this, for example: Lift the counter state up to the…