Link Search Menu Expand Document

Issues

Issues

Virtual mode

https://github.com/frontend-collective/react-sortable-tree/issues/450

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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

useLayoutEffect

  • 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(() => {
    setShowChild(true);
  }, []);
  
  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
  });
}

Other

Issue Engine Not Initialized in Effect Hook