ReactJS: how to call useEffect hook only once to fetch API data

Question

Using React, I have the following functional component where I make use of useEffect():

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {

  useEffect(() => {
    loadMessages();
  });

  return <div {...props}>These are the messages</div>;
});

const mapDispatchToProps = dispatch => ({
  loadMessages: () => dispatch({ type: 'LOAD_MESSAGES' })
});

const mapStateToProps = state => {
  return {
    messages: state.chatt.messages.chatMessages
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MessagingComponent);

As you can see, I have an effect callback that calls the loadMessages() function in the useEffect() callback in my MessagingComponent:

  useEffect(() => {
    loadMessages();
  });

The call to loadMessages() loads messages which causes the component to re-render. This behaviour is as expected, however the problem is that the re-render causes the useEffect() hook to fire again, which causes loadMessages() to be called again. This in turn loads the messages from the back-end and causes the component to render again, and the cycle repeats.

How can I avoid this? Should I simply put an if condition in the useEffect() hook, and check for the messages property?

gyurisc · Accepted Answer · 2021-01-05 14:18:07Z

45

If I understand correctly, you want to mimic the "on component mounted" behaviour of regular class based react components via useEffect(), so that the effect callback only fires once on the first render.

To achieve that behaviour, you can pass an empty array to the second argument of useEffect() like so:

useEffect(() => {
  loadMessages();
}, []); /* <-- add this */

The second array argument allows you to specify which prop variables trigger the useEffect() callback (if any) when their value(s) change.

By passing an empty array, this means that useEffect() won't be triggered by any changes to input prop variables and will in turn only ever be called once, during the first render.

For more information on this second argument, see this documentation and this documentation

edited Jan 5, 2021 at 14:18

gyurisc

11.6k17 gold badges71 silver badges108 bronze badges

answered Apr 2, 2019 at 21:55

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

talhatahir Over a year ago

This causes a warning :

React Hook useEffect has missing dependencies: loadMessages Either include them or remove the dependency array  react-hooks/exhaustive-deps

theprogrammer Over a year ago

What to do with the warning? Should we just leave it? I am using redux thunk and doing props.loadMessages() and warning is that props is a missing dependency. What to do in that case? Thanks

alextouzel Over a year ago

To get rid of the warning, you can add your function to the dependency array, like this: useEffect(() => { loadMessages(); }, [loadMessages]);. When you provide an array of dependencies, your effect will only run if one of the dependencies changes. So your effect would only run again if your loadMessage function changes, which is probably not going to happen.

Gianluca Pietrobon Over a year ago

@alextouzel adding the function inside the deps array will cause an infinite loop

alextouzel Over a year ago

@GianlucaPietrobon If the loadMessages function reference doesn't change, it will not cause an infinite loop. By default mapDispatchToProps is only called once (when your component instance is created) so in this case, the function reference should stay the same and the useEffect hook will only run once even if it has loadMessages among its dependencies.

Hetal Rachh · Accepted Answer · 2019-05-25 12:04:06Z

useEffect() is a react hook for functional components which covers the functionality of the lifecycle hooks of the class components. useEffect() combines componentDidMount(), componentDidUpdate() and componentWillUnmount() of the class components, which means it will execute when the component is mounted, when the state of the component changes and when the component is unmounted from the DOM.

Check below example,

useEffect(() => {
   setTimeout(() => {
      alert("data saved");
    }, 1000);
});

Above code/alert is executed when the component is mounted/initial render, when state of the component changes and when component is unmounted from the DOM.

To make the above code run less often we can pass an array of values as the second argument, as the dependencies for that effect. If one of the dependencies change the effect will run again.

Consider we have persons array passed into the props of the functional component and we want the alert to execute only when the persons array change.

useEffect(() => {
    setTimeout(() => {
      alert("data saved");
    }, 1000);
  }, [props.persons]);

This will execute the code during initial render and when props.persons changes.

So to execute the code only during initial render/component mount you can pass an empty array which means no dependencies specified when the effect should execute. Hence run during initial render and when the component is unmounted.

useEffect(() => {
    setTimeout(() => {
      alert("data saved");
    }, 1000);
  }, []);

You can modify your useEffect() hook as below to call it only once to fetch API data,

useEffect(() => {
    loadMessages();
  }, []);

Collectives™ on Stack Overflow

ReactJS: how to call useEffect hook only once to fetch API data

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related