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 15Suponiendo 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]);