Data from custom hook into saga

Viewed 29

I'm moving some Redux stores out of Redux into reactQuery as they dont need to be inside Redux. Now I have moved out a country array from a store to a custom hook that calls a API with rectQuery.

Now another saga needs to use the country array. But looks like I can not make a hook call in a saga. I get the error:

Error: React Hook "useCountries" is called in function "onSearchInit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

I import my hook like this:

import { useCountries } from "@mysite/hooks/useCountries";

And use it like this:

 const { countries } = useCountries();

I'm no expert in Redux. Is there another way to get my hook data into the saga?

1 Answers

Your custom hooks have their own state. It would not work like context or redux even though you were able to call them inside your saga because you would not be sharing the same state.

From the official documentation:

Do two components using the same Hook share state? No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.

https://reactjs.org/docs/hooks-custom.html

Related