useEffect () обращается в бесконечное значение l oop, если я добавляю random_grid или random_grid_solutions_set в качестве зависимостей

Question

Если я даю зависимости random_grid или random_grid_solutions_set, useEffect () запускает бесконечное l oop.

Я думал, что предоставление пустого [] в качестве зависимости решит эту проблему, потому что React отрендерится, вызовет useEffect () и затем сделать один раз. Но предоставление этой зависимости не заполняет random_grid_solutions_set (полученный из того факта, что console.log внутри useEffect () никогда не вызывается.)

import React, { useEffect, useState } from 'react';
import PrintGrid from './PrintGrid';
import firestoreRef from './FirestoreRef';
import { findAllSolutions } from './boggle_solver';
import all_words from './full-wordlist';
import GamePlay from './GamePlay';

function PlayGame(props) {
  var grid_data = props.location.state;
  const [random_grid, setRandomGrid] = useState([]);
  const [random_grid_solutions_set, setRandomGridSolutionSet] = useState(
    new Set()
  );
  console.log('Grid id in PlayGame component is: ', grid_data.grid_id);
  var str_grid_id = String(grid_data.grid_id);

  async function load_grid() {
    await firestoreRef
      .collection('grids')
      .doc(str_grid_id)
      .get()
      .then(function(doc) {
        var new_grid_data = [];
        new_grid_data.push(doc.data().array_0);
        new_grid_data.push(doc.data().array_1);
        new_grid_data.push(doc.data().array_2);
        new_grid_data.push(doc.data().array_3);
        new_grid_data.push(doc.data().array_4);
        setRandomGrid(new_grid_data);
      });
  }

  useEffect(() => {
    load_grid();
    var random_grid_solutions = findAllSolutions(random_grid, all_words.words);
    setRandomGridSolutionSet(new Set(random_grid_solutions));
    console.log(
      'PlayGame: Random grid solution set: ',
      random_grid_solutions_set
    );
  }, []);

  // var random_grid_solutions = findAllSolutions(random_grid, all_words.words);
  // var random_grid_solutions_set = new Set(random_grid_solutions);

  return (
    <div>
      <p> This is play game page. {grid_data.grid_id} </p>
      <PrintGrid grid_id={grid_data.grid_id} />
      <GamePlay
        random_grid={random_grid}
        random_grid_solutions={random_grid_solutions_set}
      />
    </div>
  );
}

export default PlayGame;