Duplicate react state example 1

duplicate_state_ex_1.jsx

// кое-что поменял
// пример лишнего дублирования состояния
const Calculator = ({ onResult }) => {
    const router = useRouter();
    const { bondId } = router.query;

    // дублирование состояния из адресной строки
    const [selectedBondId, setSelectedBondId] = useState(bondId);

    const onSubmit = async () => {
        const result = await someApiCall(selectedBondId);
        onResult(result);
    };

    return (
        <form onSubmit={onSubmit}>
            <BondSearch
                setBondId={(value) => {
                    setSelectedBondId(value);
                }}
                bondId={selectedBondId}
            />
            <input type="number" name="value" />
            <input type="submit" />
        </form>
    );
};

duplicate_state_ex_2.jsx

<BondSearch
    setBondId={(value) => {
        setSelectedBondId(value);
        router.push({ query: { ...router.query, bondId: value } });
    }}
    bondId={selectedBondId}
/>

duplicate_state_memo_1.jsx

const Component = () => {
  // некий хук который возвращает данные полученные с сервера и ф-ю для запроса этих данных
  const { fetch, data } = useApi("some/api/endpoint", { initial: [] });
  
  useEffect(() => {
    // запрашиваем данные     
    fetch();
  }, [fetch]);

  return (
    // рендерим полученные данные     
    <RenderDataSummary data={data} />
  );
};

duplicate_state_memo_2.jsx

const Component = () => {
  // некий хук который возвращает данные полученные с сервера и ф-ю для запроса этих данных
  const { fetch, data } = useApi('some/api/endpoint', { initial: [] });
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    fetch().then((resp) => setChartData(reduceDataForChart(resp)));
  }, [fetch]);

  return (
    <>
      <SomeDataSummary data={data} />
      <SomeCharting chartData={chartData} />
    </>
  );
};