Recibo un error indefinido en la variable de value que es un estado. al registrar el value en la consola, inicialmente toma el valor de props.value dentro de useEffect . Pero luego, en los renderizados simultáneos, se escribe undefined , así que supongo que la variable de value se vuelve indefinida después de eso. Pero este problema no existe cuando se elimina el código value.length . entonces el error indefinido no ocurre y props.value está dentro del área de texto. Pero necesito el código value.length para determinar algunas clases de CSS. Por lo tanto, supongo que antes de que la variable de valor sea establecida por props.value , value.length code runs. But then the state default is set as "" so que value.length` debería devolver 0 incluso si se ejecuta primero, ¿verdad? Entonces, no entiendo por qué el valor de mi variable de estado se vuelve indefinido en el medio.

 import React, { useState, useEffect } from "react"; const TextArea = (props) => { const [value, setValue] = useState(""); useEffect(() => { window.sessionStorage.setItem(props.name, value); }, [value, props]); useEffect(() => { setValue(props.value); }, [props.value]); return ( <div className="input-box input-box--3"> <textarea required name={props.name} type="text" rows={props.rows} value={value} onChange={(event) => setValue(event.target.value)} className={ console.log(value) // value.length === 0 // ? "input-box--field input-box--field--3" // : "input-box--field input-box--field--3 input-box--field--3--not-empty" } autoComplete={props.autoComplete} /> <span className={ value.length === 0 ? "input-box--placeholder" : "input-box--placeholder input-box--placeholder--not-empty" } > {props.placeholder} </span> </div> ); }; export default TextArea;