Según los documentos:
componentDidUpdate()se invoca inmediatamente después de que se produce la actualización. Este método no se llama para el renderizado inicial.
Podemos usar el nuevo useEffect() para simular el componentDidUpdate() , pero parece que useEffect() se ejecuta después de cada procesamiento, incluso la primera vez. ¿Cómo hago para que no se ejecute en el renderizado inicial?
Como puede ver en el ejemplo a continuación, la componentDidUpdateFunction se imprime durante la representación inicial, pero no se imprimió la clase componentDidUpdateClass durante la representación inicial.
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/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>Podemos usar el useRef para almacenar cualquier valor mutable que nos guste , por lo que podríamos usarlo para realizar un seguimiento de si es la primera vez que se ejecuta la función useEffect .
Si queremos que el efecto se ejecute en la misma fase que el componentDidUpdate , podemos usar useLayoutEffect en su lugar.
Ejemplo
const { useState, useRef, useLayoutEffect } = React; function ComponentDidUpdateFunction() { const [count, setCount] = useState(0); const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } ReactDOM.render( <ComponentDidUpdateFunction />, document.getElementById("app") ); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>Puedes convertirlo en ganchos personalizados , así:
import React, { useEffect, useRef } from 'react'; const useDidMountEffect = (func, deps) => { const didMount = useRef(false); useEffect(() => { if (didMount.current) func(); else didMount.current = true; }, deps); } export default useDidMountEffect;Ejemplo de uso:
import React, { useState, useEffect } from 'react'; import useDidMountEffect from '../path/to/useDidMountEffect'; const MyComponent = (props) => { const [state, setState] = useState({ key: false }); useEffect(() => { // you know what is this, don't you? }, []); useDidMountEffect(() => { // react please run me if 'key' changes, but not on initial render }, [state.key]); return ( <div> ... </div> ); } // ...Hice un gancho useFirstRender simple para manejar casos como enfocar una entrada de formulario:
import { useRef, useEffect } from 'react'; export function useFirstRender() { const firstRender = useRef(true); useEffect(() => { firstRender.current = false; }, []); return firstRender.current; } Comienza como true , luego cambia a false en useEffect , que solo se ejecuta una vez y nunca más.
En su componente, utilícelo:
const firstRender = useFirstRender(); const phoneNumberRef = useRef(null); useEffect(() => { if (firstRender || errors.phoneNumber) { phoneNumberRef.current.focus(); } }, [firstRender, errors.phoneNumber]); Para su caso, simplemente usaría if (!firstRender) { ... .