SSR: make rehydration match initial React.Context

[frankandrobot]

I have a simple React.Context that's used to generate a TOC---the idea is that each article adds itself to the TableOfContentsContext. The problem is that if the setItem method (used to add an item to the TOC) is part of the React lifecycle, I cannot seem to make the initial SSG render see the TOC. I get Warning: Did not expect server HTML to contain a <a> in <nav>.

Code to follow. Note also that the warning seems to happen only after page reload when running the development server---if I start a brand new browser tab, it seems to run fine but then i'll get the warning if I reload---so in other words, the DX breaks for me.

Here's the code:

// this sets the item
export const SetTableOfContents = (props: { item: TableOfContentsItem }) => {
  const { setItem, commit } = useContext(TableOfContentsContext);
  const called = useRef(false);

  if (!called.current) {
    setItem(props.item);
  }

  useEffect(() => {
    if (!called.current) {
      commit();
      called.current = true;
    }
  }, [commit]);

  return null;
};

export const TableOfContentsProvider = (props: {
  children?: React.ReactNode;
}) => {
  // Used to propagate changes to Consumers
  const [count, setCounter] = useState(0);

  const value = useMemo(() => {
    return {
      items: items.sort((item) => item.index),
      setItem(item: TableOfContentsItem) {
        console.log("rendering", item.heading);
        if (!items.find((x) => x.id === item.id)) {
          items.push(item);
        }
      },
      commit: () => setCounter(count + 1),
    };
  }, [count]);

  return (
    <TableOfContentsContext.Provider value={value}>
      {props.children}
    </TableOfContentsContext.Provider>
  );
};

So again, to clarify the above approach

• Calls setItem on component initialization
• Then calls "commit" to propagate changes in the Client.

Note that the problem may seem to boil down to How do I properly propagate changes to React.state on initialization so that it's visible in the initial SSG render? (That is, if I populate the TOC before React loads, then it should likely work.)

[frankandrobot]

Update: it looks like i can't consistently repo this---after restarting the dev server, it seems to work fine. The deploy also works w/o issues 🤷