React Context - dispatch from a function

Question

I have to call dispatch (Context, not Redux) in a function, but I am not able to do this. (Error: Invalid hook call. Hooks can only be called inside of the body of a function component.)

Is there a way to run hooks (or only dispatch) inside a function called from a component? I can do this using Redux (store.dispatch(...)), but I have no idea how to do this with React Context.

Example function:

function someAction() {
  const { dispatch } = React.useContext(SomeContext);
  dispatch({
    type: "ACTION_NAME",
  });
}

I am trying to call that function directly from a component:

<button onClick={() => someAction()}>Click me</button>

Sure, I can pass dispatch, but I want to avoid this because the function will be shared and it should be simple.

<button onClick={() => someAction(dispatch)}>Click me</button>

Ori Drori · Accepted Answer · 2022-04-30 14:25:15Z

3

You can only use hooks in components or other hooks, but you can use the return value of hooks inside other functions. Extract the useContext from the function, and use the returned dispatch:

const Component = () => {
  const { dispatch } = React.useContext(SomeContext);

  function someAction() {
    dispatch({
      type: "ACTION_NAME",
    });
  }

  return (
    <button onClick={someAction}>Click me</button>
  );
};

I would create a custom hook that returns the action function, and use it in the component, to make it less clunky and more reusable:

const useAction = () => {
  const { dispatch } = React.useContext(SomeContext);
  
  return () => dispatch({
    type: "ACTION_NAME",
  });
};

Usage:

const Component = () => {
  const someAction = useAction();
  
  return (
    <button onClick={someAction}>Click me</button>
  );
};

edited Apr 30, 2022 at 14:25

answered Apr 30, 2022 at 14:16

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Context - dispatch from a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related