Как использовать useEffect вместо componentDidMount и componentWillUnmount?

Question

[antonini666]

Здравствуйте, как переписать такой код на useEffect? Заранее благодарен

state = {
      authUser: null,
};

componentDidMount() {
    this.listener = this.props.firebase.auth.onAuthStateChanged(
      authUser => {
        authUser
          ? this.setState({ authUser })
          : this.setState({ authUser: null });
      },
    );
  }
 
  componentWillUnmount() {
    this.listener();
  }

Answer 1

[profesor08]

const User = ({ firebase }) => {
  const [authUser, setAuthUser] = useEffect(null);

  useEffect(() => {}, [
    // код который в componentDidMount
    firebase.auth.onAuthStateChanged(authUser => {
      setAuthUser(authUser);
    });

    return () => {  // код который в componentWillUnmount
      // хз зачем тебе обращаться еще раз к API, можешь даже не писать этот return, но если надо, то делай необходимые вещи перед уничтожением компонента
      setAuthUser(null); 
    };
  ], []); // если массив пустой, то хук сработает один раз при монтировании компонента. Если массив не передавать, хук сработает при каждом рендере кмпонента. Если передать аргументы, то сработает при их изменении.
};