Add SSR support

[KittyGiraudel]

The library works like this: there is an outer context (issued via the FootnotesProvider component). Then every footnote reference being rendered within that context (with the FootnoteRef component) is tracked, in the correct order. From this collection of references can be automatically generated the actual footnotes (the Footnotes component), at the bottom of the page. See the example for more details.

Current problem

In the current version, the footnote references register themselves within the context when mounting:

react-a11y-footnotes/src/index.js

Line 29 in 5ddb1aa

React.useEffect(() => register(footnote), [register, footnote])

The problem is that it of course doesn’t work with server-side rendering because React.useEffect() does not fire on the server. As a result, the footnote references are being rendered correctly, but they don’t link to anything because no footnotes are effectively recorded in the context.

Suggested solution

This pull-request replaces the state provided through the context with a React ref so it works on the server. So instead of having a footnotes array in the local state and passing it down (and its setter) to the FootnotesContext context, the FootnotesProvider initialises an empty map in a React ref, and passes that ref down.

🤔 Now what I’m not sure about is whether having this ref being mutated in the render method of every footnote reference is a good idea. Basically if they don’t find themselves already in the array, they push themselves in it. It feels a little shady having to do that in the render method.

I’m open to suggestions. :)

---

The current (state) implementation can be played with here: https://codesandbox.io/s/footnotes-v34hm
The new (ref) implementation can be played with here: https://codesandbox.io/s/footnotes-forked-e3t4f

[diondiondion]

Haven't looked into it too deeply, but it sounds like this may be a good use case for the upcoming React.useMutableSource hook (which is only available in the experimental branch of React atm). Could also check out this article and library by Travis Arnold for inspiration, though I don't think the current experimental API supports SSR, either.

[KittyGiraudel]

I’m thinking using a Map in the ref could also be a good idea since every occurrence can only happen once by definition and saves us from traversing the whole array in every render.

That doesn’t solve my concerns around aggressively mutating a ref in the render method of every footnote reference though.