React/Redux useEffect with dispatch fired multiple times

Question

I'm having a problem with the useEffect() and dispatch() action. I'm using the latest version of react "^18.1.0". Basically, I have the following code that is defined inside a simple.

const Item = () => {

    const dispatch = useDispatch()
    const user = useSelector(state => state.authReducer.user)

    useEffect(() => {
        dispatch(fetchItems()).then(res => console.log(res)).catch(err => console.log(err))
    }, [dispatch])

    return (
        <div id='data-container'>
            <Navbar />
            <div id='data-wrap'>
                Data
            </div>
        </div>
    );
}

export default Item

The fetchItems() is a simple function that gets some data from API.

The problem is that the action is dispatched two times but instead I would like that the action is dispatched only one time.

Any help guys will be appreciated.

Thanks.

Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Youssouf Oumar, May 19 '22 at 08:48

score 6 · Accepted Answer · answered May 19 '22 at 08:50

6

it's normal when you are running React in development mode. (it's React checking that everything is working fine).

Try building a production build and it should behave normally.

Also it's correct to have dispatch in the dependency array because it's never changing its reference.

answered May 19 '22 at 08:50

brein

1,409
9
11

Ok..I tried and is work..but how can I solve this problem in dev ? do I have to remove as suggested above? – LucaT May 19 '22 at 08:57
just don't worry about it, it's only a development issue that doesn't have repercussion once your code gets to production, here you can read more if you are interested: https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state – brein May 19 '22 at 09:00
1

Yes I see another thread chatting about this problem https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount .. they fix it just for development with this useRef, But of course I see that in production the problem doesn't happen. – LucaT May 19 '22 at 09:02
yes, you can do that but in my opinion is a waste of time :) – brein May 19 '22 at 09:06

score -3 · Answer 2 · answered May 19 '22 at 08:47

-3

If you use useEffect with an empty array you'll call only once when the component is rendered.

    useEffect(() => {
        dispatch(fetchItems()).then(res => console.log(res)).catch(err => console.log(err))
    }, [])

answered May 19 '22 at 08:47

Petatet

1
2

useEffect(() => { dispatch(fetchItems()).then(res => console.log(res)).catch(err => console.log(err)) },[]) Modified like the code above..still get called two times. – LucaT May 19 '22 at 08:49
Ah, your component is re-rendered because your state is sync I think. You can try to test your state if it's empty and call your API and don't if it's filled (?) – Petatet May 19 '22 at 08:52

React/Redux useEffect with dispatch fired multiple times

2 Answers2

Linked