Избегание хуков с установкой значений по умолчанию в React

Введение в проблему

При разработке React-приложений часто возникает необходимость установки значений по умолчанию для параметров, полученных из URL. Например, если пользователь открывает страницу с параметром urlParam=foo, мы хотим загрузить соответствующий компонент FooComponent. Однако, если страница открывается без указания параметра, мы также хотим загрузить FooComponent по умолчанию.

Проблема с хуками, устанавливающими значения по умолчанию

Для решения этой задачи можно использовать хуки, которые устанавливают значения по умолчанию. Например, хук useSetDefaultParameters может отслеживать изменения параметров URL и обновлять контекст приложения с помощью useEffect. Однако, такой подход может привести к непредвиденным последствиям.

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

Использование геттеров с значениями по умолчанию

Лучшим подходом является использование геттеров с значениями по умолчанию. Геттеры позволяют получить значение параметра из контекста, а также установить значение по умолчанию, если параметр не задан. Этот подход более чистый и не требует использования хуков с побочными эффектами.

export const useGetParams = () => {
  const urlParam = useGetUrlParam();
  const defaultValue = defaults[urlParam];
  return {
    foo: urlParam || defaultValue,
  };
};

Преимущества использования геттеров

Использование геттеров с значениями по умолчанию имеет несколько преимуществ. Во-первых, этот подход более прозрачный и простой в реализации. Во-вторых, геттеры не имеют побочных эффектов, что делает код более предсказуемым. В-третьих, использование геттеров позволяет избежать ненужных обновлений контекста, что может улучшить производительность приложения.

Пример использования геттеров

Для примера, мы можем использовать геттер useGetParams в компоненте MyAdvancedComponent для получения значения параметра foo с установкой значения по умолчанию.

export const MyAdvancedComponent = () => {
  const { foo } = useGetParams();
  return (
    <div className="...">
      {foo === "foo" && <FooComponent />}
      {foo === "bar" && <BarComponent />}
    </div>
  );
};

Таким образом, использование геттеров с значениями по умолчанию является более подходящим решением для установки значений по умолчанию в React-приложениях. Этот подход более прозрачный, простой и эффективный, чем использование хуков с побочными эффектами.