Estoy haciendo algo como esto:
function App() { const [state1, setState1] = useState([1,1,1,1,1,1]); const [state2, setState2] = useState(MyFunction()); return ( <div className="App"> <button onClick={() => setState1([1,2,3,4,5,6])}>test</button> </div> ); } const MyFunction= () => { alert("MyFunction"); return 5; } Lo extraño es que la línea alert("MyFunction"); se activa 2 veces durante la carga y 2 veces con cada clic en el botón de prueba.
Soy muy nuevo en React.js y no entiendo este comportamiento.
Para responder tu pregunta:
¿Cómo calcular el valor predeterminado para reaccionar js state hook con una función?
useState permite una función como una 'fábrica de estado inicial', como por ejemplo:
const [ state, setState ] = useState( function(){ return Math.random(); } ); Entonces, si desea usar MyFunction como fábrica, úselo de esta manera:
const [ state2, setState2 ] = useState( MyFunction );Un componente funcional de React es solo una función de javascript.
React decide cuándo llamar a esta función, que es básicamente cada vez que algo cambia. Una llamada de algún setState() es una de las razones por las que React volverá a llamar a la función del componente funcional (su función App() en este caso).
Pero le sugiero que considere llamar a la función App() "siempre que React quiera llamarla" o "todo el tiempo, una y otra vez" . Lo que significa que no debe confiar en cuándo se llama a la función del componente funcional, sino que debe confiar en las garantías que hace React con respecto a cuándo el estado está actualizado, específicamente useEffect , useState , ...
MyFunction() es solo una llamada de función, que está dentro de la llamada de función App() , por lo que, por supuesto, MyFunction() se llama cada vez que se llama a App() (que es "una y otra vez").
alert() dos veces?El componente funcional se llama 2 veces en modo estricto . Esto causa un comportamiento inesperado solo si no está usando React como se supone que debe usarse (que es algo que solo sucede para los principiantes de React).
Si está utilizando React de la manera prevista, no debería preocuparse si la función se llama una, dos o varias veces. Lo único que cuenta es lo que es el estado.
Consulte también, por ejemplo , el constructor de la clase React.Component se ejecuta una vez sin console.log?