Why functional component does not rerender after change of the state in useReducer()

Question

I use react Hooks, especially useReducer. State changes, but functional component does not rerender. The drawer should be opened after pressing the button in the menu. State changes but drawer does not open.

This is sandbox witj code https://codesandbox.io/s/affectionate-cdn-o0e6u?file=/src/drawer/drawer.tsx

const Drawer: FC = () => {
  const [state, dispatch] = useReducer(serviceReducers, serviceState);

  const drawerClose = () => {
    dispatch({ type: ActionTypes.OPEN_DRAWER, payload: false });
  };

  const drawer = (
    <div>
      <IconButton onClick={drawerClose}>
        <CancelPresentationIcon />
      </IconButton>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod            
      </p>
    </div>
  );
  return (
    <nav>
      <Drawer
        anchor={"left"}
        open={state.drawer}
        onClose={drawerClose}
        ModalProps={{
          keepMounted: true
        }}
      >
        {drawer}
      </Drawer>
    </nav>
  );
};

And this is reducer

export enum ActionTypes {
  OPEN_DRAWER = "openDrawer"
}
export interface ServiceState {
  drawer: boolean;
}
interface OpenDrawer {
  type: ActionTypes.OPEN_DRAWER;
  payload: boolean;
}
export type ServiceActions = OpenDrawer;

export const serviceState = {
  drawer: false
};

export function serviceReducers(
  state: ServiceState,
  action: ServiceActions
): ServiceState {
  switch (action.type) {
    case ActionTypes.OPEN_DRAWER:
      return {
        ...state,
        drawer: action.payload
      };

    default:
      return state;
  }
}

`useReducer` state is local, it's not shared like the context or Redux. So the header as it's own state and setting `drawer` to `true` has no effect on the actual drawer component. — Emile Bergeron, Aug 18 '21 at 13:29
In your case, [managing the state from a parent component](https://reactjs.org/docs/lifting-state-up.html) would be the easiest, there's no need for global state management here. — Emile Bergeron, Aug 18 '21 at 13:33
Related: [Lifting state up vs keeping a local state](https://stackoverflow.com/q/46594900/1218980) — Emile Bergeron, Aug 18 '21 at 13:34
[An example with a drawer menu.](https://stackoverflow.com/a/60454055/1218980) — Emile Bergeron, Aug 18 '21 at 13:42

score -1 · Answer 1 · answered Aug 18 '21 at 13:51

Here you need to use context API to https://reactjs.org/docs/context.html. useReducer() manages and manipulates the state for the individual component. You need to use the Props Drilling technique using Context API. using useReducer() you can not call other component useReducer() action. If you use redux then you should manage this with redux

Why functional component does not rerender after change of the state in useReducer()

1 Answers1