Hello Feng Jung,

Thanks for reaching out!

This happens because we are using the variable token in useEffect(), and it is a warning to us that if we do not include it into the dependency array then whenever token is updated it will not trigger useEffect() hence the re-rendering will not happen.

To overcome this warning, there is a few things that we can do:

1. Add into the dependencies

You could just add in props.token into the dependencies array and the warning will go away. Depending on how you want to design your component you can add into the dependencies array accordingly.

2. disable the warning/ignore the warning

This is just a warning so it will not affect the end result. Since in our case we just want to display the feeds and the token will not be changed hence we can safely ignore it. You could also disable the warning all together by adding

// eslint-disable-next-line react-hooks/exhaustive-deps to your useEffect() code, but disable warnings should always be your last resort.

You can check out the example below:

https://gist.github.com/MingSheng92/6732cf752eacf73595d1672207f03fc6

3. useRef()

From my understanding, this should be the most appropriate way for our use case. As we want a re-render happens when we want a different fetch limit and token is most probably never changed, we can add useRef() to achieve the following. I have commit this changes into the repo so feel free to take a look.

I found a weird issue where sometimes the void function does not trigger hence I changed it into manual calling in the latest commit.

I hope I have in some ways clear your doubt. Let me know if you have any other queries.