Skip to content

Commit 6ad1cf2

Browse files
committed
docs: add link reference for cursed React techniques
1 parent 3567280 commit 6ad1cf2

File tree

1 file changed

+13
-10
lines changed

1 file changed

+13
-10
lines changed

site/src/components/Spinner/Spinner.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -145,16 +145,19 @@ function useShowSpinner(loading: boolean, spinnerDelayMs: number): boolean {
145145
safeDelay = 0;
146146
}
147147

148-
// Doing a bunch of mid-render state syncs to minimize risks of UI tearing
149-
// during re-renders. It's ugly, but it's what the React team officially
150-
// recommends (even though this specific case is extra nasty).
151-
//
152-
// Be very careful with this logic; React only bails out of redundant state
153-
// updates if they happen outside of a render. Inside a render, if you keep
154-
// calling a state dispatch, you will get an infinite render loop, no matter
155-
// what value you dispatch. There must be a "base case" in the render path
156-
// that causes state dispatches to stop entirely so that React can move on
157-
// to the next component in the Fiber subtree
148+
/**
149+
* Doing a bunch of mid-render state syncs to minimize risks of UI tearing
150+
* during re-renders. It's ugly, but it's what the React team officially
151+
* recommends (even though this specific case is extra nasty).
152+
* @see {@link https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes}
153+
*
154+
* Be very careful with this logic; React only bails out of redundant state
155+
* updates if they happen outside of a render. Inside a render, if you keep
156+
* calling a state dispatch, you will get an infinite render loop, no matter
157+
* what value you dispatch. There must be a "base case" in the render path
158+
* that causes state dispatches to stop entirely so that React can move on
159+
* to the next component in the Fiber subtree
160+
*/
158161
const [delayLapsed, setDelayLapsed] = useState(safeDelay === 0);
159162
const [renderCache, setRenderCache] = useState({ loading, safeDelay });
160163
const canResetLapseOnRerender =

0 commit comments

Comments
 (0)