React - Does "Render lists in dedicated components" avoid reconciliation?

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

Bad:

@observer
class MyComponent extends Component {
    render() {
        const { todos, user } = this.props
        return (
            <div>
                {user.name}
                <ul>
                    {todos.map(todo => (
                        <TodoView todo={todo} key={todo.id} />
                    ))}
                </ul>
            </div>
        )
    }
}

Good:

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

@observer class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

These are the examples of the MobX Docs.

I wonder if there's a noticeable difference between Bad and Good examples.

I made a sample project, and the result was not different.

There's no SCU or PureComponent related codes.

If TodosView extends PureComponent, yes, it's fast.

So I wonder just Render lists in dedicated components makes avoiding reconciliation.