Solo hay una declaración de registro de la consola y no estoy llamando a App() cada vez (por lo que sé). ¿Por qué se ejecuta la declaración de registro de la consola cada vez que se presiona un botón?
import './App.css'; import React, {useState} from "react"; function App() { const [emotion, setEmotion] = useState("happy"); console.log(emotion, setEmotion) return( <> <h1>Current emotion is {emotion}</h1> <button onClick={() => setEmotion("sad")}>Sad</button> <button onClick={() => setEmotion("angry")}>Angry</button> <button onClick={() => setEmotion("happy")}>Happy</button> </> ) } export default App;El console.log se ejecuta cada vez porque está actualizando el estado del componente en cada clic de botón.
Ha creado una App de componente de función que se ejecuta sola cada vez que necesita ser (re)renderizada. Ese renderizado ocurre cada vez que se actualiza cualquiera de sus estados (en este caso, emotion ), lo que a su vez ocurre al hacer clic en cualquiera de los botones.
La razón por la que la emotion no se restablece en cada renderizado es que React realiza un seguimiento interno de su valor y solo actualizará emotion cada vez que se llame setEmotion . El valor inicial de "happy" solo se considera en el primer render.