chore(website): useLayoutEffect for page transitions

mlaursen · Apr 1, 2022 · 638c8ec · 638c8ec · vercel · Apr 1, 2022
1 parent 60a8825
commit 638c8ec
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/packages/documentation/src/components/Layout/Layout.tsx b/packages/documentation/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useLayoutEffect } from "react";
 import type { ConfiguredIcons } from "@react-md/icon";
 import type { LayoutConfiguration } from "@react-md/layout";
 import {
@@ -95,7 +95,7 @@ export default function Layout({
 
   const prevPathname = useRef(pathname);
   const { elementProps, transitionTo } = useCrossFadeTransition();
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (prevPathname.current === pathname) {
       return;
     }

diff --git a/packages/documentation/src/guides/configuring-your-layout.md b/packages/documentation/src/guides/configuring-your-layout.md
@@ -333,7 +333,7 @@ cross fade transition on route changes with the `useCrossFadeTransition` hook.
 
 ```diff
 -import { ReactElement } from "react";
-+import { ReactElement, useRef } from "react";
++import { ReactElement, useRef, useLayoutEffect } from "react";
  import { Layout, useLayoutNavigation } from "@react-md/layout";
 +import { useCrossFadeTransition } from "@react-md/transition";
  import { useLocation, Link } from "react-router-dom";
@@ -346,7 +346,7 @@ cross fade transition on route changes with the `useCrossFadeTransition` hook.
    const { pathname } = useLocation();
 +  const prevPathname = useRef(pathname);
 +  const { elementProps, transitionTo } = useCrossFadeTransition();
-+  useEffect(() => {
++  useLayoutEffect(() => {
 +    if (pathname === prevPathname.current) {
 +      return
 +    }

diff --git a/packages/transition/src/useCrossFadeTransition.ts b/packages/transition/src/useCrossFadeTransition.ts
@@ -68,7 +68,7 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement>
  * @example
  * New Page Transition with `@react-md/layout`
  * ```tsx
- * import { ReactElement, ReactNode, useEffect } from "react";
+ * import { ReactElement, ReactNode, useLayoutEffect } from "react";
  * import { useLocation } from "react-router-dom":
  * import { Layout, useLayoutNavigation } from "@react-md/layout";
  * import { useCrossFadeTransition } from "@react-md/transition";
@@ -84,7 +84,7 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement>
  *   const { elementProps, transitionTo } = useCrossFadeTransition();
  *
  *   const prevPathname = useRef(pathname);
- *   useEffect(() => {
+ *   useLayoutEffect(() => {
  *     if (prevPathname.current === pathname) {
  *       return
  *     }