Render Method

render method applied JSX on UI

Now that we have pre-configured our Component, we enter the first rendering of our content. As React developers, the render() method is the most familiar. We create Elements (generally via JSX) and return them. We access the Component this.props and this.state and let these values derive how content should be generated. When we access this.state, any changes we made during componentWillMount() are fully applied.

Unlike any other method in the Life Cycle, render() is the one method that exists across multiple life cycle phases. It occurs here in Birth and it is where we spend a lot of time in Growth.

In both cases, we have the core principle of keeping render() a pure method. What does that mean? That means we shouldn't call setState(), query the Native UI or anything else that can mutate the existing state of the application. The reason why is if we do this kind of interaction in render(), then it will kickoff another render pass. Which once again, triggers render() which then does the same thing... infinitely.

Note -- **Never update state in render function **

render() {
  return (
    <div className={ classNames('person', this.state.mode) }>
      { this.props.name } (age: { this.props.age })
    </div>
  );
}

Now that we have completed the first render pass, our render() method returns a single React Element. This Element may have children elements. Those children may also have children, and so on.

React Element Tree

With the potential for an n depth tree of Elements, each of the Elements need to go through their own entire life cycle process. Just like the parent Element, React creates a new instance for each child. They go through construction, default props, initial state, componentWillMount() and render(). If the child has children, the process starts again...all the way down.

This is all we have for rendering process of JSX