Suspense 引发的样式丢失问题

useLayoutEffect(() => {
  console.log('layout effect');
}, []);

useInsertionEffect(() => {
  console.log('insertion effect');
}, []);

// Console:
// - insertion effect
// - layout effect

// pseudocode. Not used in real world
function useStyleInsertion(hash: string, counter: Record<string, number>) {
  useMemo(() => {
    if (!counter[hash]) {
      // Insert only when current style not inserted
    }

    counter[hash] += 1;
  }, [hash]);

  useEffect(
    () => () => {
      counter[hash] -= 1;

      if (!counter[hash]) {
        // Remove if set to clear on destroy
      }
    },
    [hash],
  );
}

const My = () => {
  console.log('render');

  useMemo(() => {
    console.log('memo');
  }, []);

  useEffect(() => {
    console.log('effect');

    return () => {
      console.log('effect cleanup');
    };
  }, []);
};

<StrictMode>
  <My />
</StrictMode>;

// Console:
// - render
// - memo
// - render
// - memo
// - effect
// - effect cleanup
// - effect

<BrowserRoutes>
  <Routs>
    <Suspense fallback={<Loading />} />
  </Routs>
</BrowserRoutes>

// pseudocode. Not used in real world
useInsertionEffect(() => {
  if (!counter[hash]) {
    // Insert only when current style not inserted
  }
  counter[hash] += 1;

  return () => {
    counter[hash] -= 1;

    if (!counter[hash]) {
      // Remove if set to clear on destroy
    }
  };
}, [hash]);

const useMergedInsertionEffect = useInsertionEffect || useLayoutEffect;

useMergedInsertionEffect(() => {
  // Same as above
}, [hash]);

// Some logic measure DOM size
useLayoutEffect(() => {
  // This is not correct since style is not applied
  const { clientHeight } = nodeRef.current;
}, []);

// Inject style
useLayoutEffect(() => {
  // ...
}, [hash]);

import React from 'react';

const A = () => {
  React.useMemo(() => {
    console.log('A render');
  }, []);

  React.useEffect(() => {
    console.log('A mounted');
    return () => {
      console.log('A unmounted');
    };
  }, []);

  return <div>A</div>;
};

const B = () => {
  React.useMemo(() => {
    console.log('B render');
  }, []);

  React.useEffect(() => {
    console.log('B mounted');
    return () => {
      console.log('B unmounted');
    };
  }, []);

  return <div>B</div>;
};

export default function App() {
  const [show, setShow] = React.useState(true);

  const toggle = () => {
    setShow((prev) => !prev);
  };

  return (
    <div>
      <button onClick={toggle}>toggle</button>
      <div>{show ? <A /> : <B />}</div>
    </div>
  );
}

B render
B render
A unmounted
B mounted
B unmounted
B mounted

B render      // 写入 cache，插入样式
B render      // 写入 cache，插入样式（虽然是重复的，但是有缓存，不会有冗余）
A unmounted   // **引用计数减一** （此时原本的计数是 1，执行后变为 0，触发了样式卸载）
B mounted     // 引用计数加一 （此时计数是 1，但是样式已经被 A 连带卸载）
B unmounted   // 引用计数减一
B mounted     // 引用计数加一

Ant Design

Suspense 引发的样式丢失问题

StrictMode

Suspense

计数器错误

useInsertionEffect

新的兼容问题

总结