Javascript — Реагирует жизненный цикл с помощью ловушек реагирования. useEffect

Реактивный жизненный цикл с помощью реагирующих хуков useEffect

В настоящее время я меняю файлы приложения из class с событиями жизненного цикла, такими как componentDidMount на functions с хуками useEffect .

Для большинства файлов я не видел никаких проблем, но ниже я получаю проблему с производительностью, когда приложение зависает. Ноль ошибок или предупреждений в консоли, но мой компьютер и Chrome увеличивают объем памяти, используемый на этой вкладке.

Что я пропустил?

Код файла на основе старого класса

 listener: any; componentDidMount() { const { firebase } = this.props; this.listener = firebase.onAuthUserListener( (authUser: any) ={amp}gt; { localStorage.setItem('authUser', JSON.stringify(authUser)); this.setState({ authUser }); }, () ={amp}gt; { localStorage.removeItem('authUser'); this.setState({ authUser: null }); } ); } componentWillUnmount() { this.listener(); } 

Новое с хуками (вызывающее проблемы с производительностью)

 const listener = () ={amp}gt; { firebase.onAuthUserListener( (authUser: any) ={amp}gt; { localStorage.setItem('authUser', JSON.stringify(authUser)); setState(authUser); }, () ={amp}gt; { localStorage.removeItem('authUser'); setState(null); } ); }; useEffect(() ={amp}gt; { listener(); return () ={amp}gt; { listener(); }; }); 

Также стоит отметить, что я использую TypeScript с React.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector