How you can improve and minize re-rendering in your React app using component composition. It's really simple. Here we refactor a simple app that re-renders a third component not related to the changes happening.
import { useCallback, useState } from 'react'; function App() { return ( <div className="app"> <CounterComponent> <Title /> </CounterComponent> </div> ); } const CounterComponent = ({ children }) => { const [count, setCount] = useState(0); const increment = useCallback(() => { setCount(prev => prev + 1); }, []); const decrement = useCallback(() => { setCount(prev => prev - 1); }, []); console.log('render CounterComponent'); return ( <div> {children} <h2>{count}</h2> <div> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div> </div> ); }; const Title = () => { console.log('render Title'); return <h1>Counter</h1>; }; export default App; 
Top comments (0)