React > component > render twice on useState(), setValue()

Problem

React component render twice on useState().

const [value, setValue] = useState('');

Each time value is changed on setValue():

setValue('hello world')

console.log('render')

The component is rendered twice (render appears twice in console).

Solution:

1. Go to index.js file in src folder.

   • src folder is located in root folder

2. Remove <React.StrictMode>, </React.StrictMode>, from the code.

Default react code:

ReactDOM.render(
  <React.StrictMode>
    <App />,
  </React.StrictMode>,
  document.getElementById('root')
);

After changes:

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

This will solve the rendering twice problem.

Notes

This is not a bug, but a feature provided by React to catch outdated functions, you can Google if you want to find out more.