Link Search Menu Expand Document



Virtual mode

Error: Invalid hook call.

Unhandled Runtime Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.


  • source: 1
  • neither useLayoutEffect or useEffect is valid server side

if ui can be delayed until after first render

function MyComponent() {
  useEffect(() => {
    // ...

lazy load

function Parent() {
  const [showChild, setShowChild] = useState(false);
  // Wait until after client-side hydration to show
  useEffect(() => {
  }, []);
  if (!showChild) {
    // You can show some kind of placeholder UI here
    return null;

  return <Child {...props} />;

function Child(props) {
  useLayoutEffect(() => {
    // This is where your layout effect logic can be


Issue Engine Not Initialized in Effect Hook