每次安装组件时，React hook useEffect 都会导致初始渲染

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.

Answer 1

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]);

Answer 2

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 ie when component mounts , just make sure that props.authLoginSuccess is false initially.

Answer 3

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.