Cannot update a component (xxx) while rendering a different component (yyy)

By my estimation, the problem is probably due to side-effects in the gridStateReducer. The reducer functions passed to useReducer shouldn't have side-effects (i.e. call any setters or mutate any global state). The point of a reducer function is to take the current state, apply an action payload, and then return a new state, which will then prompt the React lifecycle to do whatever re-renders are necessary.

Since you're calling action.setAppState(newAppState) inside the reducer, and since that's a React state setter, my guess is that that's causing React to kick off a new render cycle before the reducer can finish. Since that new render cycle would cause components to update, it could then "cause a component to update (probably App) while rendering a different component (whatever is calling gridStateDispatch or invoking that reducer, probably Grid2)"

In terms of refactor, the requirement is that gridStateReducer return a new GridState and not cause any side-effects. First thing is probably to refactor the reducer to remove the side-effect and just return a new state:

const gridStateReducer = (last: GridState, action: GridReducerAction): GridState => {
  const newState: GridState = Helpers.deepCopy(last);
  // centralized setter for tile.mouseDown, returns if change was made
  const mouseDownOverride = (tile: string, value: boolean): boolean => {
    // force tile to exist in newState.grid
    if (!(tile in newState.grid)) {
      newState.grid[tile] = {mouseDown: false, mouseOver: false};
    }
    // check to see if change is needed
    if (newState.grid[tile].mouseDown !== value) {
      newState.grid[tile].mouseDown = value;
      // update appState grid fills
      return true;
    } else {
      return false;
    }
  }
  if (action.type === GridReducerActionType.SetTileDown && action.data instanceof Array 
  && typeof action.data[0] === "string" && typeof action.data[1] === "boolean") {
    return mouseDownOverride(...(action.data as [string, boolean])) ? newState : last;
  }
}

Now, it looks like that side-effect was interested in if (tile in action.appState.grid), so I'd need some way to have both tile and appState in context. Since I'm not sure what the structure is exactly, I'm assuming appState in the AppContext and action.appState are the same object. If not, then ignore everything after this sentence.

Looking at the reducer, it looks like we're passing the tile in as the first element in a tuple within the action passed to gridStateDispatch, so that means the caller of that function, which seems like Grid2, must know what tile should be at the time that the dispatch function is called. Since that component also has the AppContext in context, you should be able to do something like:

export const Grid2: React.FC<{}> = () => {
  const { state: appState, setState: setAppState, refs: appRefs } = React.useContext<AppContextType>(AppContext);

  const [gridState, gridStateDispatch] = React.useReducer(gridStateReducer, initGridState);

  const handleSomethingWithTile = (tile: string, someBool: boolean) => {
    gridStateDispatch({ type: GridReducerActionType.SetTileDown, data: [ tile, someBool ] })
    if (tile in appState.grid) {
      if (appState.currTool === "wall" && appState.grid[tile].fill === "empty") {
        const newAppState: State = Helpers.deepCopy(appState);
        newAppState.grid[tile].fill = "wall";
        setAppState(newAppState);
      }
    }
  }
}

This should be possible because the if (tile in appState.grid) statement doesn't seem to need the intermediate state value in the reducer, so it's possible to just move that decision out of the reducer scope here. This should prevent the sort of "state update in the middle of a state update" problem you have.

I should mention: I'd probably want to do some additional refactor here to help simplify the state logic. It seems like you're probably really close to wanting a tool like redux to help manage state here. Also should include a warning that passing full app state with setters via native React context like you're doing here can have pretty serious performance problems if you're not careful.