Почему когда использую styled-components происходит ререндер?

Question

[Bart Simpson]

У меня есть блок в котором находится инпут с кнопкой сабмит и список того что пользователь ввел в инпут (обычная туду). Все работает нормально но вот решил я попробовать styled-components, написал стили для блока:

const Todo = styled.div`
    margin: 0 auto;
    margin-top: 2%;
    border-radius: 8px;
    width: 200px;
  `;

Далее я обернул свой блок в Todo:

<Todos>
      <div className="todos-wrapper">
        <div className="search">
          <input
            type={"text"}
            placeholder={"Enter task here"}
            value={value}
            onChange={handleChange}
            onKeyPress={handlePress}
          />
          <button onClick={addTodo} className={"submit"}>
            Submit
          </button>
        </div>
        <TodoList
          todos={todos}
          removeTodo={removeTodo}
          toggleTodo={toggleTodo}
        />
      </div>
    </Todos>

Все работает, стили применились но после этого в инпут можно ввести только 1 символ и когда его ввел то лист по какой-то причине ререндерится (потом при клике на инпут можно ввести второй символ и так же лист обновляется и тд) Такой проблемы с обычным css не было, в чем может быть загвоздка ?

Comments

[Daniel~]

У вас где-то setState делается, видимо. Отсюда и ререндер

[Bart Simpson]

Daniel~, почему стили на это влияют ?

[Daniel~]

Bart Simpson, скиньте функцию handleChange, которую используете для инпута

[Bart Simpson]

Daniel~,

const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValue(e.target.value);
  };

[Daniel~]

Bart Simpson, когда вы печатаете, происходит setValue, следовательно компонент обновляется, а вместе с ним и лист

[Bart Simpson]

Daniel~, ну так у каждого контролируемого инпута должен быть onChange иначе вообще ничего ввести не получится. Я так и не понял почему эта бибилотека стилей как-то влияет на setValue, без нее все ок - не рендерится

[Daniel~]

Bart Simpson, styled-components создает компонент, поэтому он будет рендериться. Можеет навесить memo на TodoList

const TodoList = memo(() => {
  return <>...</>
});

Только учтите, чтобы у вас все пропсы, передаваемые в TodoList, были поверхностно равны, то есть через ===

[Bart Simpson]

Daniel~, мемоизацию пробовал, не помогло

[Daniel~]

Bart Simpson, обернули removeTodo и toggleTodo в useCallback? Если у вас еще и todos меняется при вводе текста, то да, не поможет