Stop propagation of recursive function conditionally

I am creating a pathfinding application, where I have created a grid of size 30*60, there is a starting element from where we have to start the path searching and a ending element where we have to stop the function once we reach the ending, in between I have marked all grids as visited. Also have created a variable named stopVisiting, so that once we reach the destination we will set stopVisiting to true to stop the function. But it is not working,

Code:

const [stopVisiting, setStopVisiting] = useState(false);
  const startVisiting = (visElement) => {
    if (visElement.i === endElement.i && visElement.j === endElement.j) {
      setStopVisiting(true);
    }
    if (visElement.wall === true) return;
    if (stopVisiting === true) {
      console.log("Stop the function here");
      return;
    } else {
      if (visElement["visited"] === false) {
        var newGrid = [...grid];
        newGrid[visElement.i][visElement.j]["visited"] = true;
        setGrid(newGrid);
        visElement["visited"] = true;
        setTimeout(() => {
          if (visElement["i"] > 0) {
            startVisiting(grid[visElement.i - 1][visElement.j]);
          }
          if (visElement["i"] < 39) {
            startVisiting(grid[visElement.i + 1][visElement.j]);
          }
          if (visElement["j"] > 0) {
            startVisiting(grid[visElement.i][visElement.j - 1]);
          }
          if (visElement["j"] < 59) {
            startVisiting(grid[visElement.i][visElement.j + 1]);
          }
          return;
        }, 500);
      }
    }
  };

It is actually logging the statement Stop the function here, but it not working.

wall element is the blocked space, through which we cannot pass.

Even though you call setStopVisiting(true), your stopVisiting is not getting assigned a new value so stopVisiting === true is never going to be true.

Instead, don't use a stopVisiting state... it is not needed. You can know whether you have reached the end by making sure you mark it as visited and then by checking endElement.visited, which really is the equivalent of what you intended with stopVisiting.

Some other remarks

• It is not needed to do both of the following, since they achieve the same:

  newGrid[visElement.i][visElement.j]["visited"] = true;
  visElement["visited"] = true;
  

  These two assignments assign to the visited property of the same object (Note that newGrid is a shallow copy of grid, so its objects are not copies, but that's OK).

• The notations ["visited"] and .visited achieve the same. I'd stick with the latter.

• You have several conditions that stop the process from visiting an element:

  • Having reached the target element
  • Hitting a wall
  • Encountering an element that was already visited.

  These three cases can be checked in one and the same if statement

Here is the updated code:

  const startVisiting = (visElement) => {
    if (visElement.wall || visElement.visited || endElement.visited) return;

    visElement.visited = true; // This will eventually set `endElement.visited`
    setGrid([...grid]);
    setTimeout(() => {
      const {i, j} = visElement;  // Destructure to make code below more readable
      if (i >  0) startVisiting(grid[i - 1][j]);
      if (i < 39) startVisiting(grid[i + 1][j]);
      if (j >  0) startVisiting(grid[i][j - 1]);
      if (j < 59) startVisiting(grid[i][j + 1]);
    }, 500);
  };