Как без хука useEffect сохранять состояние радиокнопок в LocalStorage в React?

Question

[roman-1]

Как без хука useEffect сохранять состояние радиокнопок в LocalStorage в React?

Вот код:

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [radioValue, setRadioValue] = useState("");

  useEffect(() => {
    const lang = localStorage.getItem("language");
    if (lang) {
      setRadioValue(JSON.parse(lang));
    } else {
      setRadioValue("ru");
    }
  }, []);

  useEffect(() => {
    if (radioValue) {
      localStorage.setItem("language", JSON.stringify(radioValue));
    }
  }, [radioValue]);

  function changeHandler(event) {
    setRadioValue(event.target.value);
  }

  return (
    <div className="App">
      <h1> Hello! </h1>

      <input
        type="radio"
        name="radio"
        value="ru"
        checked={radioValue === "ru" ? true : false}
        onChange={changeHandler}
      />

      <input
        type="radio"
        name="radio"
        value="en"
        checked={radioValue === "en" ? true : false}
        onChange={changeHandler}
      />
    </div>
  );
}

Answer 1

[Егор Живагин]

А в чём проблема с хуком? Почему хотите убрать?

Comments

[roman-1]

Просто использовать тестово. Так для учебного проекта. Сказали без хука useEffect.

[WbICHA]

roman-1, можешь в хэндлер засунуть.

[Егор Живагин]

const [radioValue, setRadioValue] = useState(localStorage.getItem("language") || "ru");

// ... 

function changeHandler(event) {
setRadioValue(event.target.value);
localStorage.setItem("language", JSON.stringify(event.target.value));
}

и оба useEffect можно удалить

[roman-1]

Егор Живагин, спасибо большое за решение!