How do I use spread operator in useEffect without infinite loop?

Question

I code a Chrome extension. popup.html is implemented in React as follows:

const [blogUrls, setblogUrls] = useState<string[]>([]);

useEffect(() => {
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
    setblogUrls(newBlogUrls);

    return true;
  });
}, [blogUrls]);

How do I avoid an infinite loop?

I know it's not good to write [blogUrls] even though I wrote setblogUrls(newBlogUrls).

But I want to write like [...blogUrls,.

Please tell me how to resolve this contradiction.

Answer 1

Try this -

useEffect(() => {
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
    setblogUrls(newBlogUrls);

    return true;
  });

  return () => chrome.runtime.onMessage.removeEventListener();
}, []);

it will execute once after page render. your dependency blogUrls is changing after rendering page inside the useEffect itself. so useEffect calling itself again and again. So, its creating infinite loop. To render one time, just make sure it should be empty dependency in useEffect.