CODEWITHSUNDEEP
reactjsreact-hooks
Amir Hossain
Amir Hossain

Reputation: 693

difference between renders outside useEffect and inside useEffect

considering a react functional component, If I add my component as a child to other components. it works perfectly. For test purpose I logged outside useEffect. when page loads it renders once inside useEffect and multiple times outside useEffect. does it mean, my component rendering multiple times since message is logged outside useEffect multiple times?

useEffect(()=>{
  console.log('from toolbar inside useEffect')
},[]);
console.log('from toolbar outside useEffect')

Upvotes: 1

Views: 682

Answers (1)

Shaurya Vardhan Singh
Shaurya Vardhan Singh

Reputation: 684

Yes it means your component is rendering multiple times as for your

  console.log('from toolbar inside useEffect')

this is rendered only once because you have set it so. You have set UseEffect to run only once on page load.

UseEffect can be used run some logic when something changes

useEffect(() => {
 // The logic that you want to run
},[comma seperated parameters])

whenever any parameter changes the useEffect hook will be called.

As you have passed no parameters hence it runs only once.

You can read more about useEffect here

Upvotes: 3

Related Questions