No entiendo la necesidad de usar useEffect para los casos en los que quiero hacer cosas, por ejemplo, antes de renderizar. Por ejemplo, en el código a continuación, quiero completar los datos con información, por ejemplo, al recibirlos de una API. Ahora la diferencia del siguiente código:
const Product_List = (props) => { const [data, setData] = useState(); getData((response)=> setData(response)); return( <FlatList data={data} /> ) }Con el siguiente código:
const Product_List = (props) => { const [data, setData] = useState(); useEffect(() => { getData((response)=> setData(response)); }, []); return( <FlatList data={data} /> ) }En otras palabras, diferente de este código:
class Product_List extends Component{ constructor(props) { this.state = { data: [] } getData((response)=> this.setState({data: response})); } render(){ return( <FlatList data={data} /> ) } }Con el siguiente código:
class Product_List extends Component{ constructor(props) { this.state = { data: [] } } componentDidMount(){ getData((response)=> this.setState({data: response})); } render(){ return( <FlatList data={data} /> ) } }Las funciones que componen los componentes de función se llaman cada vez que se representa el componente.
useEffect parte del código para que solo se ejecute cuando cambie una de las dependencias.
En su segundo ejemplo, tiene una lista de dependencias de [] , por lo que solo se ejecuta cuando el componente se procesa por primera vez.
En su primer ejemplo, llama a getData cada vez que se procesa el componente. Entonces, se procesa, llama a getData , que llama a setData , que activa un procesamiento, por lo que llama a getData y tiene un ciclo infinito.
Su código de componente de clase no es equivalente.
Cuando su console.log está fuera de useEffect, se ejecuta durante la "fase de procesamiento"
“Fase de procesamiento” Pura y sin efectos secundarios. Puede ser pausado, abortado o reiniciado por React.
Cuando lo usa dentro de useEffect, se ejecuta después de la "fase de procesamiento" o durante la "fase de confirmación" .
"Fase de compromiso" Puede trabajar con DOM, ejecutar efectos secundarios, programar actualizaciones.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
por lo tanto, no sería prudente hacer efectos secundarios fuera de useEffect o componentDidMount, ya que el comportamiento de React no siempre es el esperado.