react-dom error when going back after updating the redux store

Question

I'm stumbling across a strange error in my react project. Everything works fine if I go from the home page to the next page. The next page hits an API and updates the Redux store. Now, if I hit the back button or try to go back through the react-router-dom( history.go(-1) ), my page throws this error:

Here is a working CodeSandbox link to the app. Here is how to reproduce the error:

• Enter some text in the input box.
• Then hit the search button.
• Click on browser's button or click on the back button on the page.
• Observe that the home page is blank. And it shows the above error.

Note that if I don't update the store and then go back to previous page, then everything works fine.

Answer 1

In your file app/screens/EmployeeDetails/employeeDetails.jsx you have:

useEffect(() => dispatch(fetchEmployee(name)), [])

The implicit return here attempts to use the result of the dispatch as thecleanup for the useEffect . Your error occurs because it tries to call the cleanup function since you didn't return undefined , but you returned a Promise instead of a function which the useEffect expected for it's cleanup (hence the error: 'is not a function').

You should add curly brackets to avoid the implicit return:

useEffect(() => { dispatch(fetchEmployee(name)) }, [])