Fazer reagir gancho useEffect não executado na renderização inicial
De acordo com os documentos:
componentDidUpdate()
é chamado imediatamente após a atualização. Este método não é chamado para a renderização inicia
Podemos usar o novouseEffect()
hook para simularcomponentDidUpdate()
, mas parece queuseEffect()
está sendo executado após cada renderização, mesmo na primeira vez. Como faço para que ele não seja executado na renderização inicial?
Como você pode ver no exemplo abaixo,componentDidUpdateFunction
é impresso durante a renderização inicial, mascomponentDidUpdateClass
não foi impresso durante a renderização inicia
function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidUpdate() {
console.log("componentDidUpdateClass");
}
render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Click Me
</button>
</div>
);
}
}
ReactDOM.render(
<div>
<ComponentDidUpdateFunction />
<ComponentDidUpdateClass />
</div>,
document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>