Tenho um componente <Filho>
que não recebe props
, porém é renderizado novamente sempre que o <Pai>
tem alguma atualização de estado (useState
).
Para resolver isso imaginei que poderia fazer, no componente <Filho>
, algo como:
shouldComponentUpdate(nextProps, nextState) {
return nextState !== this.state;
}
Mas como fazer isso com Hooks? Ou há outra alternativa para evitar o rerender?
Situação atual:
[RENDER] Pai
[RENDER] Filho
[RENDER] Pai
[RENDER] Filho
function Filho() {
// O componente Filho tem estado, apesar de eu não atualizá-lo nesse exemplo
const [b, setB] = React.useState([]);
console.log("[RENDER] Filho");
return <div></div>;
}
function Pai() {
const [a, setA] = React.useState([]);
React.useEffect(() => {
function fetchData() {
setTimeout(function(){
setA(['a', 'b']);
}, 1500);
}
fetchData();
}, []);
console.log("[RENDER] Pai");
return <Filho />;
}
ReactDOM.render( <Pai /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Resultado esperado:
[RENDER] Pai
[RENDER] Filho
[RENDER] Pai