React：避免使用设置默认值的 hooks，使用带默认值的 getters

Source: Dev.to

问题

同事帮助发现了一个可能导致错误的模式。
当用户打开 mysite.com/?urlParam=foo 时，应用应加载对应的 FooComponent。如果网站在没有任何查询参数的情况下打开，也应默认加载 FooComponent。

组件示例

export const MyAdvancedComponent = () => {
  useSetDefaultParameters();

  const { params } = usePlaygroundContext();

  return (
    <>
      {params.foo === "foo" && <FooComponent />}
      {params.foo === "bar" && <BarComponent />}
      {/* …other components */}
    </>
  );
};

Hook 实现

export const useSetDefaultParameters = () => {
  const urlParam = useGetUrlParam();

  const { setParam } = useMyContext();

  useEffect(() => {
    const defaultValue = defaults[urlParam];
    setParam(urlParam, defaultValue);
  }, [urlParam]);
};