react useEffect with Dependency Array still looping

Question

I am trying to wrap my head around the useEffect hook. To my knowledge, if a dependency array is included in the hook, the effect will only run if that particular piece of state changes, however I cannot get it to work. Every time I add a dependency array, it loops infinately.


    useEffect(() => {

      axiosWithAuth()
        .get(`/api/parent/children/${id}`)
        .then(response => {
          // console.log('API response: ', response);
          // console.log('childs data: ',response.data);
          setData(response.data)
          // console.log('new data: ', data);
        });
      .catch(err => console.log(err));
    }, [data]);

if I pull data out of the dependency array, it works fine, no looping. The premise is, if a user clicks on a child's name, it brings up the data for that child (this is a chore-tracker that I'm working on) so I would ASSUME (and I could be wrong) that...

I think I may have answered this on my own, but I would like some confirmation:

I need to set a slice of state for the child, and if THAT state changes, then the effect runs.. so.. something like this..


    const {data, setData} = useState([]);
    const {child, setChild} = useState('');

      useEffect(() => {

        axiosWithAuth()
          .get(`/api/parent/children/${id}`)
          .then(response => {
            // console.log('child list response: ', response);
            // console.log('childs data length',response.data.length);
            // console.log('childs data',response.data);
            setData(response.data)

            // console.log('new data: ', data);
          });
          .catch(err => console.log(err));
      }, [child]);

Is my thinking right in that I need to do it that way instead of the way I had it?

And yes, I plan on using Global State with either Redux or Context, but I've actually already done it this way, and will just refactor. — Mike Phelps
– Mike Phelps, Commented Feb 9, 2020 at 6:51
can you add the definition part of code of "data" and where you change it — Ahmed Yousif
– Ahmed Yousif, Commented Feb 9, 2020 at 7:09
data is just a slice of state that's being modified by the get. So it pulls the parent data by ID, which contains an array of the children and their data as objects inside the parent's object. — Mike Phelps
– Mike Phelps, Commented Feb 9, 2020 at 17:13

shahabvshahabi · Accepted Answer · 2020-02-09 18:40:50Z

1

Yes you are doing fine . But the better answer for these kind of problem is :

useEffect(() => {
        axiosWithAuth()
          .get(`/api/parent/children/${id}`)
          .then(response => {
            // console.log('child list response: ', response);
            // console.log('childs data length',response.data.length);
            // console.log('childs data',response.data);
            setData(response.data)

            // console.log('new data: ', data);
          });
          .catch(err => console.log(err));
} , []})

When you pass an empty array to useEffect it only runs once

edited Feb 9, 2020 at 18:40

answered Feb 9, 2020 at 7:05

shahabvshahabi

9452 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Phelps Over a year ago

Oh Oh oh.. because the child data is INSIDE the parent's object, I do only need to pull the record once.. (the id being referenced is the parent's id, because for COPPA requirements, I don't have it as a separate record) Thank you!

Collectives™ on Stack Overflow

react useEffect with Dependency Array still looping

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related