Question

152

React useEffect (with []) is called every time I change page (React Router)

rated 0 times [ 156] [ 4] / answers: 1 / hits: 6605 / 5 Years ago, fri, october 25, 2019, 12:00:00

I prepared small demo for the problem:

So I am using react-router-dom to create Single Page Application and I created standard navigation between two pages (components Page1 and Page2).

Problem is that every time I switch between pages then useEffect hook (with empty array as second argument) is called (on demo you can see it in console).

I would want to fetchData for each component only once and reuse that data after, no matter if user will switch between pages. Is there possibility to do it without checking some conditions inside useEffect function? It's a little confusing to me, because useEffect [] should run only once for component and it's not a case.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

1 Javascript - set all keys of a Map object to a value

Sat, Apr 27, 19, 00:00, 5 Years ago

View All

answered 5 Years ago tatyanna · Accepted Answer

An empty deps array means that the useEffect will only be called each time the component is mounted. The useEffect is being called every time you change the page because the page component is being unmounted each time, then remounted when you visit it again. For example, try clicking the page 1 link twice. It will only log the message once, because the page is not being unmounted and remounted.

You could try to fix this problem by using the useEffect a level higher than the page, which would be your app component, and call your fetch there instead. However, I'm not sure that can be done with a class component, so you might have to use a function component instead.