¿Cómo llamar a la función de carga con React useEffect?

El useEffect se ejecuta de forma predeterminada después de cada procesamiento del componente. Al colocar useEffect en nuestro componente, le decimos a React que queremos ejecutar la devolución de llamada como un efecto. React ejecutará el efecto después de renderizar y después de realizar las actualizaciones de DOM. 

Si pasamos solo una devolución de llamada, la devolución de llamada se ejecutará después de cada renderizado. Si solo queremos ejecutar la función useEffect después del procesamiento inicial, como segundo argumento, podemos darle una array vacía. Si pasamos un segundo argumento (array), React ejecutará la devolución de llamada después del primer renderizado y cada vez que se cambie uno de los elementos de la array. 

Por ejemplo, la devolución de llamada se ejecutará después del primer procesamiento y después de cualquier procesamiento en el que se cambie uno de varOne o varTwo para el siguiente código:

useEffect(() => console.log('Hi '), [varOne, varTwo])

Si pasamos el segundo argumento, una array vacía después de que React de cada procesamiento comparará la array y verá que no se cambió nada y se llamará a la devolución de llamada solo después del primer procesamiento.

Sintaxis:

const MyComponent = (props) {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);
  return <div> {/* jsx code */} </div>;
}

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Nombre de archivo: App.js

import React, { useEffect, useState } from "react";
  
const App = (props) => {
  const [btnText, updatebtnText] = useState("")
  
  const loadDataOnlyOnce = () => {
    updatebtnText("Hello kapil")
  }
    
  // This function will called only once
  useEffect(() => {
    loadDataOnlyOnce();
  }, [])
  
  return (
    <div style={{ margin: 200 }}>
      <button onClick={() => updatebtnText("Hi")} >
        {btnText}
      </button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: 

Después de hacer clic en el botón, el texto cambia