Why side effect is not ok in React

Question

I was learning React and localStorage. Then, I came across an article saying that localStorage is best to be used via useEffect() due to side-effects. So, this code is bad:

import React from 'react';
const App = () => {
  const [value, setValue] = React.useState('');
  const onChange = event => {
    localStorage.setItem('myValueInLocalStorage', event.target.value);
    setValue(event.target.value);
  };
  return (
    <div>
      <h1>Hello React with Local Storage!</h1>
      <input value={value} type="text" onChange={onChange} />
      <p>{value}</p>
    </div>
  );
};
export default App;

But this code is right:

import React from 'react';
const App = () => {
  const [value, setValue] = React.useState('');
  React.useEffect(() => {
    localStorage.setItem('myValueInLocalStorage', value);
  }, [value]);
  const onChange = event => setValue(event.target.value);
  return (
    <div>
      <h1>Hello React with Local Storage!</h1>
      <input value={value} type="text" onChange={onChange} />
      <p>{value}</p>
    </div>
  );
};
export default App;

One question WHY? Why is wrong with the first code and what re the benefits of the second code with useEffect()

Answer 1

Both cases of your code are fine. The reason the first case doesn't need to be wrapped in useEffect is because it's already in an event handler, and it will be called only once per change. Likewise, the reason we use useEffect in the second case is so that React can ensure it only calls the effect once.

Why bother? React may retry rendering your component when it likes, and it expects the same JSX for the same state/props regardless of how many times it renders--i.e., your component should be "pure". This enables lots of performance enhancements like Suspense, but you don't need to concern yourself with that as long as you don't run side-effects directly in the render function.