I have parent React ponent with 3 children, like this:

var Parent = React.createClass({
   render: function() {
     return (<div>
         <C1/>
         <C2/>
         <C3/>
       </div>)
   }
})

I am trying to be able to change children's position based on current parent state. So in different cases I need to return C1,C3,C2 or C3,C2,C1, etc. But I want to this without re-render the children. I am trying to use shouldComponentUpdate on each of the children but its gets called for the ponents that didn't change their position within parent's render method. So if initially return C1, C2, C3 then C2, C1, C3 then shouldComponentUpdate gets called for C3 but not for C1 or C2 so in this case I can return false inside C3 and prevent re-render but I don't understand why shouldComponentUpdate is not called for the children that did change their position.

Any suggestions? thank you.

I have parent React ponent with 3 children, like this:

var Parent = React.createClass({
   render: function() {
     return (<div>
         <C1/>
         <C2/>
         <C3/>
       </div>)
   }
})

I am trying to be able to change children's position based on current parent state. So in different cases I need to return C1,C3,C2 or C3,C2,C1, etc. But I want to this without re-render the children. I am trying to use shouldComponentUpdate on each of the children but its gets called for the ponents that didn't change their position within parent's render method. So if initially return C1, C2, C3 then C2, C1, C3 then shouldComponentUpdate gets called for C3 but not for C1 or C2 so in this case I can return false inside C3 and prevent re-render but I don't understand why shouldComponentUpdate is not called for the children that did change their position.

Any suggestions? thank you.

• javascript
• reactjs

Share Improve this question Follow asked Apr 5, 2016 at 21:32 Valeriu MazareValeriu Mazare 32366 silver badges1212 bronze badges 10

• How are you implementing shouldComponentUpdate? Remember, shouldComponentUpdate is a function that should tell React when to update, not just return true or false. – Akshat Mahajan Commented Apr 5, 2016 at 22:03
• I don't have an implementation for it yet because first I try at least to get shouldComponent called inside children every time the parent re-renders them. – Valeriu Mazare Commented Apr 5, 2016 at 22:07
• Let's take a step back and re-evaluate your approach. Are these children all an instance of the same ponent class? If so, wouldn't you just need to pass different props to them, causing them to effectively swap positions? – Michael Parker Commented Apr 5, 2016 at 22:08
• @ValeriuMazare: If you don't have an implementation for it, then how can you expect shouldComponentUpdate to be called? :) I'm just asking for the function you assigned to shouldComponentUpdate. – Akshat Mahajan Commented Apr 5, 2016 at 22:09
• 1 @ValeriuMazare - Sure, but that wasn't what I was asking. I want to know if they are all an instance of the same class. For example, if your parent ponent was a <TodoList/>, then each of the children would be a <Todo/>. Is this the case? – Michael Parker Commented Apr 5, 2016 at 22:37

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 3

Take a look at https://reactjs/docs/fragments.html#keyed-fragments.
Keyed fragments were designed to solve theses kind of problem ;)