CODEWITHSUNDEEP
javascriptreactjsreact-native
Vikram Belde
Vikram Belde

Reputation: 1189

Can a Parent React Component's function have a new React Component

I came across a application that uses render method Like below

var Parent = React.createClass({
        render: function () {

          var Child1 = React.createClass({
              render: function () {
                  return <SomeView/>   //Child1 View 
              }
            })  

          var Child2 = React.createClass({
              render: function () {
                  return <SomeOtherView/> //Child2 View
              }
            })

          return(    // Parent View with Child1 and Child2
              <View>
                  <Child1/>
                  <Child2/>
              </View>

          )
        }
})

Are they any performance issues involved in this, until this point I was thinking a render should be as light as possible and

1 . All the logic goes into the ComponentWillMount and ComponentDidMount

2 . All the React Views are generated seperatly(Outside of Parent ReactClass) and added to Parent on Render.

Please correct me if I'm wrong.

Upvotes: 0

Views: 37

Answers (1)

Matt Aft
Matt Aft

Reputation: 8936

You're right, no logic should be happening in the render and it should be as pure as possible. What this is doing is creating Child1 and Child2 on every single render which will affect performance. Normally you would have those in separate files and import them into the Parent for use.

Upvotes: 2

Related Questions