0

I just started learning about react/react-native. And I just saw an entry point file where there is a class and it has a render function. So technically, this render function will be called when a state of it gets changed. Even the states of its child components. So in order to make the child components not to be rendered, we are doing conditional rendering. It makes me to see the render function with pity.

For Example:

If we expand the main render function (entry point's render function), the jsx will look something like this. 

<Component1>
  { !!noSession && 
    <Component2>
       ...
    </Component2>
  }
  { !noSession && 
    <Component2>
      { !!spinnerNeeded &&
        <Component3>
          ...
        </Component3>
      }
      <Component4>
          ...
      </Component4>
    </Component2>
  }
</Component1>

So, when a user gets logged in, the noSession flow will no longer be rendered until the session gets cleared. So each and every time, when a child's state belongs to session flow gets changed, all the unnecessary conditions (!!noSession, !!spinnerNeeded, etc..) would be validated. Why is that? Won't it drain the performance, if the components tree becomes huge?

Or Am I misunderstanding the react's way of working?

Mediocre
  • 281
  • 2
  • 9
  • I think you need to read this https://stackoverflow.com/questions/45273948/what-happens-when-setstate-function-is-called/45274008#45274008, You are misunderstanding it a little – Shubham Khatri Jan 21 '18 at 10:43
  • @ShubhamKhatri That's really helpful in understanding the life cycle methods bit clearer. But my question here is that, all the unnecessary conditions will be evaluated when a inner level child's state gets changed? – Mediocre Jan 21 '18 at 10:49
  • I suppose that is also explained in that answer that, any change in the child doesn't trigger a re-render of the parent only of its children – Shubham Khatri Jan 21 '18 at 10:51
  • 1
    @ShubhamKhatri Nice answer that is. I missed the points from it actually. +1 For that answer. You can close this one as duplicate if you want. Thanks. – Mediocre Jan 21 '18 at 10:57
  • Glad it helped you :-) (y) – Shubham Khatri Jan 21 '18 at 10:58

0 Answers0