Должен ли я передать ответные хуки в качестве значения для провайдера контекста?

Question

Мне нужны глобальные переменные пользователи, которые могут отфильтровать некоторых пользователей. Использование перехватчиков реагирования, переданных в качестве значения, многократно приводило к перерисовке страницы. Какое решение лучше и почему?

    export const UsersProvider = props => {
  const [user, setUser] = useState({
    isLogged: false
  });

  return (
    <UsersContext.Provider value={[filteredUsers, setFilteredUsers]}>
{props.children}
    </UsersContext.Provider>
  );
};

ИЛИ

class UserProvider extends React.Component {
  constructor(props) {
    super(props);

    this.setUser = () => {
      this.setState(state => {
        return {user: "true"};
      });
      console.log(this.state.user);
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      user: false,
      setUser: this.setUser
    };
  }

  render() {
    return (
      <UserContext.Provider value={this.state}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

Answer 1

Вам нужно только добавить то, что вам нужно использовать у потребителя. Лично я предоставляю только пару функций / значений, таких как:

export const UsersProvider = props => {
  const [user, setUser] = useState({
    isLogged: false
  });

  const props = {
    filteredUsers,
    setFilteredUsers
  };

  return (
    <UsersContext.Provider {...props}>
      {props.children}
    </UsersContext.Provider>
  );
};

Но я бы только добавил вещи, которые вам нужны в другом месте, в объект props. Я сомневаюсь, что вам нужно все, что касается состояния вашего текущего компонента, в другом месте, потому что в этом случае у вас могут возникнуть проблемы с организацией.