Change in the order of Hooks when injecting a reducer, calling it, and selector-ing it withing a single component

[FrozenKiwi]

I suspect this is an issue with react itself rather than with redux-injectors, but posting here first as it's the first link in the chain.

I have a component that injects it's reducers and sagas, calls the saga to fetch from an API, and then uses the returned data all within the same component. When I do this, I get the following error:

Warning; React has detected a change in the order of hooks called by <Component>

The code did look like this:

const HelpDocs = () => {
   // useReducer & useSaga work together to populate state.documents
  usePrismic();
  // dispatcher to trigger saga
  const actions = usePrismicActions(); 
   // fetch said documents from redux
  const docs = useSelector((s: ApplicationRootState) => s.documents);
  // onLoad, trigger the actions to fetch the doc's from API
  useEffect(() => {
    actions.fetchFaqs();
  }, []);

I fixed it by pulling the useReducer etc bit out into a wrapping component:

export const HelpDocs = (props: RouteComponentProps) => {
  usePrismic();
  return <HelpDocsInternal {...props} /> // The rest of the code
}

As I said, I suspect this isn't in your domain, but you know this project better than I do so perhaps it might ring some bells before posting in react itself.

[BenLorantfy]

Hmm I'm having trouble reproducing this. Would you be able to link me to a github repository showing the minimal reproducible case? That would be helpful.

[FrozenKiwi]

Thanks, but I think I'll close this - I'm unfortunately in the 'if-its-not-on-fire-its-fine' stage of the project, so I can't really give this the attention it needs. Also - if there isn't something obvious there, then it is probably user error somewhere else (it usually is :-) ).

I've left a link to this issue in the code base in case we come back to it in the future