He estado usando estas dos formas indistintamente, sin embargo, no estoy seguro de cuál es la más correcta. su comportamiento parece ser el mismo, pero estoy seguro de que hay un caso de uso para cada uno. ¿Alguien puede ayudarme a entender cuál es el uso adecuado para cada caso?
const [customer, setCustomers] = useState(props.location.state);
useEffect(() => { setCustomers(props.location.state); }, []);
Normalmente debería ceñirse a la primera. Llamar al setter
de useState
puede generar renderizaciones no deseadas y una disminución del rendimiento.
En el primer bloque, el cliente se inicializa directamente y no se vuelve a procesar. El método setCustomer
cambiará el estado y volverá a representar el componente. Al final, toda la función se ejecutará dos veces, lo que puede verificar con un console.log
.
const [customer, setCustomers] = useState(0); useEffect(() => { setCustomers(15); }, []); console.log(customer) // will first output 0 and then 15
Suponiendo que en el segundo caso, tiene esto como su declaración useState
:
const [customer, setCustomers] = useState();
El segundo establece el valor del cliente en componentDidMount
. Entonces, en el renderizado inicial, no tendrá el valor apropiado en su variable de customer
. Pero sí, muy poco después se establecerá el valor correcto debido al código escrito en useEffect
.
Para aclararlo, habrá 2 representaciones aquí (porque el valor de la variable de estado cambia). En el primero, ese no será el caso ya que la variable de estado tiene un solo valor desde el principio.
El primero es más efectivo.
const [customer, setCustomers] = useState(props.location.state);
Si usa el segundo (usando useEffect
), su componente se volverá a renderizar.
Es decir, su customer
de variable de estado se actualizará en useEffect
después de que DOM se represente inicialmente, esto conduce a la segunda representación del componente.
Pero si desea que customer
sea actualizado por props.location.state
, debe agregar el useEffect
como el siguiente.
useEffect(()=> { setCustomers(props.location.state); }, [props.location.state]);