Tengo el siguiente código:
export function CurrentUserProvider({ children }) { const [data, setData] = useState(undefined); return ( <CurrentUserContext.Provider value={{ data, setData, }} > {children} </CurrentUserContext.Provider> ); }y estoy haciendo lo siguiente para actualizar los datos:
const currentUser = useContext(CurrentUserContext); currentUser.setData((prevData) => { ...prevData, totalFollowers: prevData.totalFollowers + 1 });Ahora necesito evitar actualizaciones de estado innecesarias. Pero también necesito poder acceder a la función pura setData.
Mi idea era comparar en profundidad el nuevo objeto de datos, actualizando mi CurrentUserProvider:
export function CurrentUserProvider({ children }) { const [data, _setData] = useState(undefined); const setData = (newData) => { if(!lodash.isEqual(newData, data)) { setData(newData); } } return ( <CurrentUserContext.Provider value={{ data, setData, }} > {children} </CurrentUserContext.Provider> ); }Pero... con esto, no puedo acceder a prevData. ¿Algunas ideas?
Realice la verificación de igualdad dentro de la devolución de llamada setState y, si son iguales, devuelva el estado anterior. Según los documentos :
Si su función de actualización devuelve exactamente el mismo valor que el estado actual, la representación posterior se omitirá por completo.
export function CurrentUserProvider({ children }) { const [data, _setData] = useState(undefined); const setData = useCallback(newData => { _setData(prevData => lodash.isEqual(newData, prevData) ? prevData : { ...prevData, ...newData } ); }, []); return ( <CurrentUserContext.Provider value={{ data, setData, }} > {children} </CurrentUserContext.Provider> ); }