2e641ac6c9
* refactor: break Unit component into smaller unit-tested parts * feat: save scroll position on video fullscreen exit * chore: remove swap file
36 lines
1.8 KiB
JavaScript
36 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
|
|
/**
|
|
* We discovered an error in Firefox where - upon iframe load - React would cease to call any
|
|
* useEffect hooks until the user interacts with the page again. This is particularly confusing
|
|
* when navigating between sequences, as the UI partially updates leaving the user in a nebulous
|
|
* state.
|
|
*
|
|
* We were able to solve this error by using a layout effect to update some component state, which
|
|
* executes synchronously on render. Somehow this forces React to continue it's lifecycle
|
|
* immediately, rather than waiting for user interaction. This layout effect could be anywhere in
|
|
* the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
|
|
* a joke) one here so it wouldn't be accidentally removed elsewhere.
|
|
*
|
|
* If we remove this hook when one of these happens:
|
|
* 1. React figures out that there's an issue here and fixes a bug.
|
|
* 2. We cease to use an iframe for unit rendering.
|
|
* 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
|
|
* 4. We stop supporting Firefox.
|
|
* 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
|
|
* Firefox/React for review, and they kindly help us figure out what in the world is happening
|
|
* so we can fix it.
|
|
*
|
|
* This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes. If
|
|
* we change whether or not the Unit component is re-mounted when the unit ID changes, this may
|
|
* become important, as this hook will otherwise only evaluate the useLayoutEffect once.
|
|
*/
|
|
const useLoadBearingHook = (id) => {
|
|
const setValue = React.useState(0)[1];
|
|
React.useLayoutEffect(() => {
|
|
setValue(currentValue => currentValue + 1);
|
|
}, [id]);
|
|
};
|
|
|
|
export default useLoadBearingHook;
|