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)