dispatch called inside useImperativeHandle doesn't call action

Question

I have a component with a save button

<Button onClick={() => requestSaveAsync()}>Save</Button>

I also need to be able to call requestSaveAsync from the top level of the app, so I added a useImperativeHandle hook inside a custom hook called useEditRow

interface Props {
    ref: MutableRefObject<{
        addItem: () => void
    }>
}

const useEditRow = (props: Props) => {
    useImperativeHandle(props.ref, () => ({
        addItem: () => requestSaveAsync()
    })
}

The useEditRow hook is inside of an OrderItemTable component

const OrderItemTable = forwardRef(function OrderItemTable(props: Props, ref: MutableRefObject<any>) {
    const editRow = useEditRow({
        ref: ref
    })
})

The requestSaveAsync method uses useMutation from react-query

useMutation(mutateFn, {
  onSuccess: () => dispatch({type: 'clear', name: 'row'})
})

Clear row sets the state to initial state. If requestSaveAsync is called by clicking the button, the row is cleared. If I call it through the parent component, the onSuccess function is called, but the dispatch doesn't do anything. If I put a breakpoint on the dispatch function, I see the following code about to called from react_devtools_backend.js

  useReducer: function (a, b, e) {
    a = F();
    b = null !== a ? a.memoizedState : void 0 !== e ? e(b) : b;
    z.push({
      primitive: "Reducer",
      stackError: Error(),
      value: b
    });

    // devtools show the empty function on this line will be executed next
    return [b, function () {}];
  },

At first I thought that maybe useImperativeHandle was using stale state, so I tried returning {...initialState} instead of initialState. This didn't seem to help. I tried adding the dependencies array suggested by react-hooks/exhaustive-dep. That didn't help. Does anyone know why when dispatch is called from useImperativeHandle, the state doesn't update?

Here is a codesandbox with some of the basic ideas that were shown abo.

Drew Reese · Accepted Answer · 2021-09-21 00:08:10Z

1

Your useImperativeHandle hook doesn't appear to be using the forwarded React ref. In other words, React refs are not regular React props that can be accessed by children components.

You should use React.forwardRef to correctly forward any passed refs on to the function component.

React.forwardRef Forwarding Refs

You didn't include your function component but if you follow the examples in the links provided it's fairly trivial to figure out.

Example:

const MyComponentWithSaveButton = (props, ref) => {
  useImperativeHandle(ref, () => ({
    addItem: requestSaveAsync,
  }));

  const requestSaveAsync = () => { .... };

  ...
};

export default React.forwardRef(MyComponentWithSaveButton);

Notice here the function component signature not accepts two arguments, the props object and the React ref that is being forwarded, and that the useImperativeHandle hook references the forwarded ref.

answered Sep 21, 2021 at 0:08

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

4 Comments

user2453676 Over a year ago

I've updated my question to show that the ref used in useImperativeHandle comes from the props of a custom hook, which in turn comes from React.forwardRef. Should I use React.forwardRef directly on the hook or does React.forwardRef only need to be used on components?

Drew Reese Over a year ago

@user2453676 forwardRef is only used on function components. It's a bit unclear your use case, but is it something like this codesandbox?

user2453676 Over a year ago

Yes that is exactly my use case. Thank you. It was a bit hard for me to simplify the concepts in some of the gigantic components I have, but you have done it very well.

Drew Reese Over a year ago

@user2453676 Regarding dispatch, can you share how requestSaveAsync callback uses useMutation? This seems like an invalid use of a React hook. See Rules of Hooks.

Collectives™ on Stack Overflow

dispatch called inside useImperativeHandle doesn't call action

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related