Контролируемые компоненты в React и постоянный рендеринг

Есть код добавления item'ов к ul.

state = {
        value: '',
        items: ['First list item', 'Second list item', 'Third list item'],
    };

addItem() {
    this.setState((prevState) => {
        const items = [...prevState.items];
        items.push(prevState.value);
        return {
            items,
        };
    });
}

value(event) {
    this.setState((prevState) => {
        return {
            value: event.target.value,
        };
    });
}

render() {
    return (
        <>
            <header className="header">
                <h1 className="heading">React</h1>
            </header>
            <section className="section">
                <ul className="ul">
                    {this.state.items.map((item, index) => <li key={index} className="list-item">{item}</li>)}
                </ul>
                <label>
                    <input onInput={this.value} className="input" type="text"/>
                </label>
                <button onClick={this.addItem} className="button">Add item</button>
            </section>
        </>
    );
}

Это работает и мы решам добавить один из методов жизненного цикла для оптимизации компонента, а именно для того, что-бы он не перерисовывался каждый раз, когда мы что-то вводим в input:

shouldComponentUpdate(nextProps, nextState, nextContext) {
    if (this.state.items === nextState.items) {
        return null;
    }
    return true;
}

Теперь компонент будет вызывать функцию рендер только при добавлении нового item'a к списку. Но что случится если мы решим сделать наш компонент контролируемым? То есть изменить

<input onInput={this.value} className="input" type="text"/>

на

<input value={this.state.value} onInput={this.value} className="input" type="text"/>

Теперь поле value не будет обновляться так как у нас более не вызывается функция рендер при вводе значений в input. Если мы откажемся от метода жизненного цикла shouldComponentUpdate, то все заработает нормально.

Суть вопроса в том, что все агитируют за контролируемые компоненты, но как использовать контролируемый компонент в данном случае и не перерисовывать страницу по 100 раз за ввод очередного item's.

Правильно ли я вообще понимаю механизм контролируемого компонента? Например в данном случае добавление поля value={this.state.value} в input сделало его контролируемым? И только?