Render lists in dedicated components 리스트만을 위한 컴포넌트

큰 collections을 렌더링해야 할 때 특히 지켜져야 한다. collection이 바뀔 때 마다 collection으로 부터 produced된 component는 재조정을 거쳐야 하기 때문이다. 따라서, 컴포넌트는 다른 무언가를 렌더링하지 않고 collection만을 render하는 것을 권장한다.

bad:

const MyComponent = observer(({ todos, user }) => (
    <div>
        {user.name}
        <ul>
            {todos.map(todo => (
                <TodoView todo={todo} key={todo.id} />
            ))}
        </ul>
    </div>
))

good:

const MyComponent = observer(({ todos, user }) => (
    <div>
        {user.name}
        <TodosView todos={todos} />
    </div>
))

const TodosView = observer(({ todos }) => (
    <ul>
        {todos.map(todo => (
            <TodoView todo={todo} key={todo.id} />
        ))}
    </ul>
))

https://mobx.js.org/react-optimizations.html#render-lists-in-dedicated-components