I am fetching data from backend using axios whenever I am trying to update hooks it is not updating. The data is JSON from where I am extracting data and trying to set element. It might sound silly but can somebody tell me what is dependent array?

I keep getting this
Line 18: React Hook useEffect has a missing dependency: 'elements'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Here is code

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
      console.log(elements);
    };
    res();
  }, []);
 console.log(elements.map(element => console.log(element)));
  return <div className='App'>Hello</div>;
}

export default App;

I am fetching data from backend using axios whenever I am trying to update hooks it is not updating. The data is JSON from where I am extracting data and trying to set element. It might sound silly but can somebody tell me what is dependent array?

I keep getting this
Line 18: React Hook useEffect has a missing dependency: 'elements'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Here is code

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
      console.log(elements);
    };
    res();
  }, []);
 console.log(elements.map(element => console.log(element)));
  return <div className='App'>Hello</div>;
}

export default App;

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Oct 1, 2019 at 19:14 vinayak shahdeo asked Oct 1, 2019 at 18:32 vinayak shahdeovinayak shahdeo 1,48822 gold badges1313 silver badges2323 bronze badges 2

• Normally when you set state after async function finishes you have to check if the ponent is mounted before you set the state – HMR Commented Oct 1, 2019 at 18:49
• thanks for the tip – vinayak shahdeo Commented Oct 1, 2019 at 19:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Just console.log outside your effect. You're already using the updater version of useState

 setElements(elements => [...elements, data])

The missing dependecy warning is ing from console.log(elements)

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  console.log(elements);

  return <div className='App'>Hello</div>;
}

export default App;

Missing dependency warning is because you use console.log(elements) inside the useEffect. And your elements log is not showing latest result because state is not changed (yet)

Just add a useEffect to keep track of elements changes like below.

 function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  useEffect(() => console.log(elements), [elements])

  return <div className='App'>Hello</div>;
}

export default App;

To answer your question;

The dependency array is their to let React know when the useEffect in this case should be triggered. So the useEffect i added, only triggers when its dependency elements is changed.

In your case you are puting the array data inside elements, setElements(elements => [...elements, data]); so it will be array inside array. Try the below :

function App() {
  const [elements, setElements] = useState([]);
  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements([...elements, data]);
    };
    res();
  }, []);

  useEffect(() => console.log(elements), [elements])

  return <div className='App'>Hello</div>;
}

export default App;