Accepted answer

The problem is, that when you call TodoList twice, you will get two different closured versions of Todo, that means that React will think that you are returning different components as the references to the constructor are not equal:

 function TodoList() {
   return function Todo() { }

 console.log(TodoList() === TodoList()); // false

Is that a bad practice?

Moving Todo outside of TodoList is definetly performance wise as React can reconciliate better, however you loose the benefits of the closure. As you do not closure anything here, I would move it outside, but thats rather a question of preference.

Related Query

More Query from same tag