Как правильно организовать данный код?

Question

[Анита Ковалева]

Есть такая структура >

const [usersList, setUsersList] = useState([]);

App 
  <UsersList users={usersList} setUsersList={setUsersList} />

где App корневой компонент, userList - компонент который рендерит введенных пользователей, и принимает в себя через проп - юзеров и метод перерендера массива.

Есть функция

const deleteUser = (id) => {
    props.setUsersList((prevState) =>
      prevState.filter((user) => user.id !== id)
    );
  };

Которая принимает в себя id юзера, и удаляет из состояния нужного юзера.

Вопрос: куда правильно писать функцию deleteUser? Сейчас она у меня находится в компоненте usersList, но так же могу поднять её в App, просто передав id на верх через колбэк.

Если ли архитектурные отличия? И как "чище"?

Answer 1

[Валерий]

Для лучшего чтения и семантики лучше передавать функцию в <UsersList deleteUser={deleteUser} ... />

Answer 2

[Ilia Gromov]

Ещё актуально?
Я бы сделал класс User и прокидывал его. Таким образом будет singleton и мы лего сможем его использовать в любом месте
Отпишись если ок, есть пару вопросов по фронту, интересна твоя точка зрения.