¿Puede usar useState variable_1 como valor predeterminado para otra useState variable_2, especialmente cuando useEffect establece variable_1?
Aún más simple, ¿puede usar useState variable_1 como valor predeterminado para otra useState variable_2 (sin la dependencia de useEffect)?
Para elaborar, aquí hay un ejemplo.
const [firstName, setFirstName] = useState("DEFAULT_NAME"); const [fullName, setFullName] = useState(firstName); //is doing this permissible? useEffect(() => { setFirstName("REAL_NAME") }, []); console.log(fullName); // what would be printed here? ¿Cuál sería el valor de fullName ? ¿Se establecería en "DEFAULT_NAME" (lo que indica que se configuró ANTES de llamar a useEffect) o se establecería en "REAL_NAME" (lo que indica que se configuró DESPUÉS de llamar a useEffect)?
Puedes , pero por lo general no sería una buena idea. Lo que sucederá es que la segunda variable se inicializará para que sea igual a la primera, pero después de eso, estarán completamente desconectadas entre sí; la actualización de cualquiera de los estados más tarde no daría lugar a que el otro estado cambiara.
Por lo general, en una situación en la que podría estar pensando en algo como esto, sería mejor tener un solo estado, con el valor dependiente calculado dentro del componente (quizás con useMemo por motivos de eficiencia), por ejemplo
const [firstName, setFirstName] = useState("DEFAULT_FIRST_NAME"); const [lastName, setLastName] = useState("DEFAULT_LAST_NAME"); const fullName = useMemo(() => firstName + ' ' + lastName, [firstName, lastName]);No quieres hacer, por ejemplo
const [firstName, setFirstName] = useState("DEFAULT_FIRST_NAME"); const [capitalizedName, setCapitalizedName] = useState(firstName); // ... onChange=(e => { setFirstName(e.target.value); setCapitalizedName(e.target.value.toUpperCase()); })Es complicado tener datos de estado duplicados en más de una variable de estado, y puede ser confuso: no desea llamar a un par de establecedores de estado al actualizar solo un valor.
Pero si la lógica que está buscando no requiere eso, si realmente solo le importa inicializar ambos estados a la misma cosa en el montaje, y luego hacer que estén completamente separados, entonces lo que está haciendo ahora estaría bien .
Sin embargo, lo consideraría un poco más claro si ambos valores predeterminados hicieran referencia a la misma variable externa:
const defaultName = "DEFAULT_NAME"; const [firstName, setFirstName] = useState(defaultName); const [fullName, setFullName] = useState(defaultName);Eso tiene menos posibilidades de confundir a los lectores.
Reaccionar componentes con ganchos es solo una función, se ejecuta de arriba a abajo; useEffect no se activará cuando React esté listo para actualizar su vista, no interfiere con la inicialización de useState.
Así que puedes hacer eso, no hay problema. Pero, como @CertainPerformance mencionó al final, es mejor simplemente separar el valor predeterminado en una variable separada.
Por cierto, en esta línea:
const [fullName, setFullName] = useState(firstName); fullName será "DEFAULT_NAME" según su ejemplo. y aquí también:
console.log(fullName); // what would be printed here?