Почему useEffect срабатывает дважды

Question

const[update,setUpdate]=useState(false)
const[data,setData]=useState([])

При отправке новых значений на сервер , useEffect срабатывает дважды и делает два get запроса

        useEffect(()=>{
                const AjaxData = async () =>{
                    const reasponse = await fetch(url,{
                        method:'GET',


                    });
                    const reasponseJson = await reasponse.json();
                    console.log(reasponseJson);
                    setData(reasponseJson);
                }


                AjaxData();
  },[update])

Вот функция добавления

function addUser (body){
        fetch(url,{
            method:'PUT',
            body:JSON.stringify(body),
            headers: headers,
        }).then(()=>setUpdate(!update));  


    }

Как избежать второй отправки get запроса

Answer 1

useEffect срабатывает дважды: при первом рендере компонента и при изменении зависимости update. Если ты хочешь чтобы он срабатывал единожды, оставь список зависимостей пустым

Answer 2

В данном случае, как у вас -

повторный вызов срабатывает при изменении состояния update
если нужно, чтобы useEffect срабатывал только при состоянии update=false, то в начале useEffect напишите проверку


useEffect(()=>{
     if(update)return 
    //... AjaxData() 
    },[update])

Answer 3

Как вариант

let fix = true
useEffect(() => {
  fix = !fix
  if (fix) return
  console.log(123)
   // ...
   // ...
}, [update])

БЛОГ НА HUSL

Почему useEffect срабатывает дважды

Ответы (3 шт):