Skip to content

Commit e04cb92

Browse files
authored
Make element returned by useOutlet have stable-ish reference (#13382)
1 parent 8233930 commit e04cb92

File tree

3 files changed

+15
-6
lines changed

3 files changed

+15
-6
lines changed

.changeset/honest-bears-pull.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router": patch
3+
---
4+
5+
Made useOutlet element reference have stable identity in-between route chages

contributors.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,7 @@
239239
- m-shojaei
240240
- machour
241241
- majamarijan
242+
- Malien
242243
- Manc
243244
- manzano78
244245
- marc2332

packages/react-router/lib/hooks.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -533,12 +533,15 @@ export function useOutletContext<Context = unknown>(): Context {
533533
*/
534534
export function useOutlet(context?: unknown): React.ReactElement | null {
535535
let outlet = React.useContext(RouteContext).outlet;
536-
if (outlet) {
537-
return (
538-
<OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
539-
);
540-
}
541-
return outlet;
536+
return React.useMemo(
537+
() =>
538+
outlet && (
539+
<OutletContext.Provider value={context}>
540+
{outlet}
541+
</OutletContext.Provider>
542+
),
543+
[outlet, context]
544+
);
542545
}
543546

544547
/**

0 commit comments

Comments
 (0)