useSelectedLayoutSegments: should have a memoized alternative

[kanevnik]

Goals

1. Provide the user with a safe-to-use useSelectedLayoutSegments hook in a client component.
2. Which should return the URL segments

Non-Goals

No response

Background

The issue is as follows:

const segments = useSelectedLayoutSegments()

the snippet above provides you with an array that includes all the parts in your URL. reference

The problem from what I can deduce is that on each re-render of the component. The hook provides you with a different array (same values, however different references). Which in turn forces a re-render if you are using it as a dependency in useMemo or useEffect.

A simple snippet you can reproduce it is.

const NavBar: FC = () => {
  const segments = useSelectedLayoutSegments();

  const [segmentBasedRefDep, setSegmentBasedRefDep] = useState<string[]>([]);

  useEffect(() => {
    console.log("re render based on segments");

    setSegmentBasedRefDep(segments.map((segment) => segment + " "));
  }, [segments]);

  return <div className="flex border-b-[1px] border-b-gray-400 p-4">Home</div>;
};

After running the snippet above in a client component. The console should be flooded.

The only alternative I have found so far is to not use the hook and create it myself.

Here is an example snippet:

const NavBar: FC = () => {
  const pathname = usePathname();

  const segments = useMemo(
    () => pathname.split("/").filter(Boolean),
    [pathname],
  );

  const [segmentBasedRefDep, setSegmentBasedRefDep] = useState<string[]>([]);

  useEffect(() => {
    console.log("re render based on segments");

    setSegmentBasedRefDep(segments.map((segment) => segment + ">"));
  }, [segments]);

  return (
    <div className="flex border-b-[1px] border-b-gray-400 p-4">
      Home {String(segmentBasedRefDep)}
    </div>
  );
};

Proposal

Make the useSelectedLayoutSegments hook memoized so we can use its tools without the drawbacks.