React 中只运行一次的功能组件

Question

I was trying to create a grid in React and got really confused when my program gave me different outputs depending on whether I save the file in my editor or refresh the page on the live server.

Afaik the useEffect() hook runs only once if you pass it an empty array, [] , as the second parameter. However, when I run my code:

  const [grid, setGrid] = useState([]);
  console.log(grid);

  useEffect(() => {
      const grid = [];
      for (let row = 0; row < 15; row++) {
          const currentRow = [];
          for (let node = 0; node < 40; node++) {
              currentRow.push(createNode(node, row));
          }
          grid.push(currentRow);
      }
      setGrid(grid);
  }, []);

The console logs two (I'm not 100% sure why it console.log twice but alas) arrays with a total of 600 createNode(node, row) objects, which is what I want. And if I edit the code and save it also displays this, My problem is that if I refresh the live server the console spits out an empty array, [] , on the first console.log and then it logs the array of 600 objects.

I have other functionality in my program that uses the grid array but I'm pretty sure these break because they are passed an empty array. At least I get an error "cannot read property 'x' of undefined" when I manually refresh the page compared to when I just save in the editor.

Any help/insight would be greatly appreciated...

EDIT: The grid renders just fine but as soon as I import my logic for Dijkstra's algorithm

import dijkstra from "./algorithms/dijkstra";

Then I call the function

dijkstra(grid, grid[7][10])

which is only partly implemented but still:

function dijkstra(grid, startNode) {
    const unvisitedNodes = getNodes(grid);
    startNode.distance = 0;
    sortByDistance(unvisitedNodes);
    const closestNode = unvisitedNodes.shift();
    console.log(getNeighbors(closestNode, grid));
}

function sortByDistance(nodes) {
    nodes.sort((nodeA, nodeB) => nodeA.distance - nodeB.distance);
}

function getNodes(grid) {
    const unvisitedNodes = [];
    for (const row of grid) {
        for (const node of row) {
            unvisitedNodes.push(node);
        }
    }
    return unvisitedNodes;
}

function getNeighbors(referenceNode, grid) {
    const neighbors = [];
    const { row, col } = referenceNode;
    if (row > 0) neighbors.push(grid[row + 1][col]);
    if (row < grid.length - 1) neighbors.push(grid[row - 1][col]);
    if (col > 0) neighbors.push(grid[row][col - 1]);
    if (col < grid[0].length - 1) neighbors.push(grid[row][col + 1]);
    return neighbors;
}

export default dijkstra;

Answer 1

yes that's how React works. Whenever you refresh your browser the app renders. In React render

1. At first, states are initialized (that's why your 1st console log was empty array)
2. then DOM prints
3. then lifecycle methods or hooks are initialized
4. then DOM again prints with updated state.(that's why you have the objects in 2nd log) the whole process repeats when you reload your browser.

[] in useEffect prevents re-run of the hook when you update your states only.