useEffect hook dependency

JavaScript
1

Hi campers,

I am using useReducerand context API to manage state. Let us say I have my state with the shape { page: 0, articles: [] } and I have useEffect hook as shown below.

useEffect(() => {
     // Fetch some data and dispatch an action to update state
}, [state.page])

I can’t pass state as a dependency to useEffect because it will trigger an infinite loop but I want the effect to be invoked whenever page changes . Is what I have done above recommended? Passing page which is a field of the state object as a dependency . I have not seen anybody do that before. What is quite familiar to me is declaring something like const[page, setPage] = useState(0); and then passing page as dependency.

2

I dont see why it wouldn’t work, if state.page is just going to be a number it should run every time that number changes, changing page inside state should still render the page

1 Like
3

Hello there,

If what you want is useEffect to run, after every update (only you can decide this, based on where the component is), then do not include a dependency array. This is the default behaviour.

Otherwise, if you are specifically interested in the state.page value causing the update, then what you have is correct, and recommended.

Hope this helps somewhat.

1 Like
4

It does work but my worry is whether it is not anti-pattern to do something of the sort.

5

it will only run when state.page is changed if thats what you mean, but i would still recommend that you do it the above way that you mentioned when using useState()

6

Sure thanks @Sky020 . It works but I just wanted to be sure I am doing the right thing. I want the effect to run whenever the page changes so as to make an API call. To be honest the most common approach I have seen is declaring the state like const[page, setPage] = useState(0); and passing page but if my approach isn’t anti-pattern then perhaps I will have to go with it.

7

Oh…well, I am unsure if that, specifically, is an anit-pattern or not, because I cannot imagine how you are using state.page / page…

In functional components, it is recommended to declare and change state using the useState hook.

If you are using a global variable (global to component or page), then that would not be advised.

Would you mind providing more code?

8

it will render on every state change but useEffect wont run until state.page has change if that makes sense?

1 Like
9

@biscuitmanz. I have decided to use useReducer because I want to have groups of state in separate state objects based on how related they are. For this particular one page and articles need to be together in an object like {page: 0, articles: []}.

10

@nibble, yeah if your using useReducer dot notation will be fine or you could use Destructuring

const [{ page, articles }, dispatch] = useReducer(reducer, initialState);

useEffect(() => {

}, [page])
1 Like
11

@nibble keep in mind that if you wanted to use articles which is an array on useEffect you would have to use length so when articles are added or removed useEffect knows that the array is being changed.

useEffect(() => {

}, [articles.length])
1 Like
12