Блог

Главная - Вопросы по программированию - Утечка памяти с использованием react useState и useEffect

Утечка памяти с использованием react useState и useEffect

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие крючки

Вопрос:

Я создаю компонент, который будет непрерывно извлекать данные из api

(при реальном использовании ответ займет некоторое время, поэтому он не будет вызываться постоянно)

Поэтому я создал этот пользовательский хук для этого

 export const callUpdateApi = (url) => {
  const [state, setState] = useState({ data: null, loading: true });

useEffect(() => {
  setState(state => ({ data: state.data, loading: true }));
  axios.get(url)
    .then(x => {
      return x.data
    } , err => {
        console.log('CALL UPDATE API ERROR ')
        // timer to try again later if request fail
        setTimeout(function(){
          console.log('err status', err);
          setState({...state , data: null})
      } , 3000)
    } )
    .then(y => {
      setState({ data: y, loading: false });
    });
}, [state.data]);

return state;    
};

затем, если я назову это, использование памяти будет увеличиваться с течением времени.

Если я настрою так, что мой api ответит быстро, через несколько минут моя память будет почти заполнена

Комментарии:

1. попробуйте useState({ data: null, loading: true }, [])

2. Вы запускаете этот код с открытыми инструментами отладки браузера? Если это так, вкладка Сеть будет фиксировать ответ на каждый запрос и занимать все больше и больше памяти с течением времени. В любом случае, я думаю, вам нужен какой-то механизм синхронизации, чтобы гарантировать, что ваша страница не будет повторно запрашивать серверную часть в быстром режиме. Это просто нехорошо.

3. Я предполагаю, что это были инструменты отладки, как вы упомянули, я новичок в интерфейсной разработке

4. Механизм синхронизации обрабатывается в моем бэкэнде