CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-lifecycle-hooks
Nibir Alam
Nibir Alam

Reputation: 110

ReactJS component useeffect hooks call every time parents get updated

I have a parent component.

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
    {loading ? ( 
     <ChildComponent></ChildComponent>
    ): (
     <div>Some text...</div>
    )} 
  )
}

and a child component

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
  }, [])

  return (
     <div>This is child component</div>
  )
}

The problem is that whenever loading state changes to true the child components useEffect hooks get calls every time time even though i am passing [] array as the second argument of useEffect hook. However useEffect works perfectly if i remove the condition and then change the loading state.

Upvotes: 0

Views: 866

Answers (2)

Dmytro Krasnikov
Dmytro Krasnikov

Reputation: 1004

Ok, what you have here is conditional loading. Once your loading state changed to false - your component will be removed from DOM and all the cleanup work performed. Once loading state changed from false to true - your component will be added and all initialization work will happen (useState will also set initial value, etc.). You can try to update your hook to see what is going on. Also please check useEffect docs

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
     return () => console.log("cleanup");
  }, [])

  return (
     <div>This is child component</div>
  )
}

So my suggestion, that you really don't want to remove component from the DOM, so you need just not to show it

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
     <ChildComponent style={{display: loading? 'block' : 'none' }}></ChildComponent>
    { !loading && <div>Some text...</div> } 
  )
}

Upvotes: -1

Dinesh Kumar
Dinesh Kumar

Reputation: 189

You should pass loading state through props and use it in useEffect.

Parent Component:

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
    {loading ? ( 
     <ChildComponent loading={loading}></ChildComponent>
    ): (
     <div>Some text...</div>
    )} 
  )
}

Child component:

function ChildComponent(loading){

  useEffect(() => {
     console.log("render child component"); 
  }, [loading])

  return (
     <div>This is child component</div>
  )
}

Upvotes: -1

Related Questions