React hook useEffect causes initial render every time a component mounts

Question

I am new to React hooks. So, I wanted to implement componentWillReceiveProps with React hooks. I used React.useEffect() like so:

React.useEffect(() => {
    console.log(props.authLoginSuccess);  // initially called every time, the component renders
  }, [props.authLoginSuccess]);


return ( //JSX...)

onst mapStateToProps = (state: any): StateProps => {
  return {
    authLoginSuccess: selectAuthLoginSuccess(state) //used selector to select authLoginSuccess
  };
};
export default connect(
  mapStateToProps,
  // mapDispatchToProps
  { authLogin, toggleLoadingStatus } 
)(Auth);

The problem is, useEffect is called each time the component renders initially, which I don't want. I only want it to render, when "props.authLoginSuccess" changes.

...another wild guess: your component may be remounted by its parent(or alongside parent). you may check that by adding useEffect(() => { console.log('mounted!'); return () => console.log('unmounted');}, []) — skyboyer
– skyboyer, Commented Jul 23, 2019 at 18:22

Shubham Khatri · Accepted Answer · 2019-07-24 04:15:36Z

6

Since you want the effect to not run on initial render, you can do that by making use of useRef

const initialRender = useRef(true);
React.useEffect(() => {
    if(initialRender.current) {
        initialRender.current = false;
    } else {
        console.log(props.authLoginSuccess);  // initially called every time, the component renders
    }
  }, [props.authLoginSuccess]);

answered Jul 24, 2019 at 4:15

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

ron4ex · Accepted Answer · 2019-07-23 18:24:20Z

1

Wrap it in an if condition like this:

React.useEffect(() => {
  if (props.authLoginSuccess) {
    console.log(props.authLoginSuccess);
  }
}, [props.authLoginSuccess]);

Note that the effect will still run though - both initially and every time props.authLoginSuccess changes (which is okay!).

The if block will prevent running console.log(props.authLoginSuccess) when props.authLoginSuccess is falsy. So if you don't want it running initially i.e. when component mounts, just make sure that props.authLoginSuccess is false initially.

answered Jul 23, 2019 at 18:24

ron4ex

1,10310 silver badges21 bronze badges

Comments

Rasuna Khatami · Accepted Answer · 2019-07-23 22:31:34Z

1

You could add another state that would monitor whether or not the component has been mounted.

const [isMounted, setIsMounted] = React.useState(false);

React.useEffect(() => {
  if (isMounted) {
    console.log(props.authLoginSuccess);
  } else {
    setIsMounted(true);
  }
}, [props.authLoginSuccess]);

That way, it will only execute when the component has been mounted.

answered Jul 23, 2019 at 22:31

Rasuna Khatami

1,0717 silver badges4 bronze badges

1 Comment

Muhammad Amir Over a year ago

This is a workaround and I have tried that too, does not help with my case.

Collectives™ on Stack Overflow

React hook useEffect causes initial render every time a component mounts

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related