search

pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.67k stars 41 forks source link

Correct node ordering on mount/unmount #16

Open giulioz opened 4 years ago

giulioz commented 4 years ago

If something unmounts-mounts it will be placed to the end of the flex, ignoring ordering: https://github.com/react-spring/react-three-flex/blob/master/src/Box.tsx#L186

  // Make child known to the parents yoga instance *before* it calculates layout
  useLayoutEffect(() => {
    if (!group.current) return () => {}

    parent.insertChild(node, parent.getChildCount())
    registerBox(group.current, node, flexProps, centerAnchor)

    // Remove child on unmount
    return () => {
      parent.removeChild(node)
      if (group.current) {
        unregisterBox(group.current, node)
      }
    }
  }, [node, parent, flexProps, centerAnchor])