Слишком много повторных рендеров с React Hooks

Question

Были заданы похожие вопросы, но я не нашел решения для этого конкретного. У меня есть один компонент, который рендерит все доски, и я использую пользовательский хук useFetch для извлечения всех плат.

const BoardsDashboard = () => {

  let [boards, setBoards] = useState([]);

  const { response } = useFetch(routes.BOARDS_INDEX_URL, {});

  setBoards(response);

  return (
    <main className="dashboard">
      <section className="board-group">
        <header>
          <div className="board-section-logo">
            <span className="person-logo"></span>
          </div>
          <h2>Personal Boards</h2>
        </header>

        <ul className="dashboard-board-tiles">
          {boards.map(board => (
            <BoardTile title={board.title} id={board.id} key={board.id} />
          ))}
          <CreateBoardTile />
        </ul>

      </section>
    </main>
  );
};

const useFetch = (url, options) => {
  const [response, setResponse] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { response, error };
};

Я получаю слишком много повторных рендеров из-за строки setBoards(response), но я не уверенкакой правильный способ справиться с этим.

Спасибо!

Answer 1

Звучит так, как будто вы хотите, чтобы хук useEffect действовал при обновлении ответа.

useEffect(() => {
  setBoards(response);
}, [response]);

Примечание: если вам не нужно когда-либо изменять состояние boards, то, возможно, оно вообще не должно быть состоянием, вы можете просто использовать возвращаемое значение из вашего useFetchподцепить и покончить с этим.

const { response: boards } = useFetch(...);