A menudo tengo un caso de uso en el que hay algún estado en el reductor y también se debe acceder a él en alguna devolución de llamada (useCallback)
const [state, dispatch] = useReducer(reducer, initialState); ... const handleAction = useCallback(()=>{ // dependency on state },[])para evitar ejecutar useCallbacks en cada cambio de estado, busco una referencia y tengo el estado asignado en cada renderizado
stateRef.current = state;y luego, donde sea que tenga que usar algo del estado en una devolución de llamada, se accede desde stateRef. ¿Es esta una forma correcta de hacerlo?
Si simplemente está actualizando stateRef desde el cuerpo del componente, esta no es la forma más correcta, ya que se consideraría un efecto secundario no intencional. Si no se utiliza un useCallback con una dependencia del state para volver a encerrar el valor del estado actual en una función de devolución de llamada, se sugiere un useEffect con una dependencia del valor del estado.
const [state, dispatch] = useReducer(reducer, initialState); const stateRef = useRef(); useEffect(() => { stateRef.current = state; }, [state]); const handleAction = ()=>{ // access stateRef.current }; Sin embargo, esto es efectivamente lo que logra useCallback , pero de una manera más sucinta.
const [state, dispatch] = useReducer(reducer, initialState); const handleAction useCallback(() => { // access current state value closed over in scope }, [state]);