when useRef is used as a counter shown below, Instead of adding one , its adding two times

Question

When add name is clicked the idRef is incrementing 2 times instead of 1 time. the output is shown below

const { useRef, useState } = React;
function UseRefs() {
  const inputRef = useRef(null);

  const idRef = useRef(1);
  const [names, setNames] = useState([]);

  const addName = () => {
    setNames((prevNames) => [
      ...prevNames,
      { id: idRef.current++, name: inputRef.current.value },
    ]);
  };

  return (
    <div>
      <div >
        {names.map((name) => (
          <div key={name.id}>
            {name.id}. {name.name}
          </div>
        ))}
      </div>
      <div className="m-3">
        <input type="text" ref={inputRef} />
        <button  onClick={addName}> Add name </button>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<UseRefs />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

OUTPUT:

1 a, 3 ab, 5 ABC, 7 abcd

EXPECTED

a
ab
abc
abcd

output image

Your OUTPUT is the same as your EXPECTED, and the result of the code in your question matches both... — CertainPerformance, Nov 19 '22 at 16:21
The code in your question does not produce such a thing, as you can see if you run the snippet. — CertainPerformance, Nov 19 '22 at 16:31
yes, but in my localhost is showing 1 3 5 7 even after restarting the server — Dustin Bun, Nov 19 '22 at 16:34
Edit the code in the question so that we can reproduce the problem too - we can't debug what we can't see — CertainPerformance, Nov 19 '22 at 16:35
You have `StrictMode` locally which increases the ref value two times. The error does not occur here since there is no `StrictMode`, instead use a `state` for the count or just the `index` of the map function — RubenSmn, Nov 19 '22 at 16:45

score 0 · Answer 1 · answered Nov 19 '22 at 16:48

It's happening because react is rendering the component UseRefs twice.

This is due to the <React.StrictMode> is enabled by default when creating react app with npx create-react-app.

details are shown here https://stackoverflow.com/a/61897567/16958718

when useRef is used as a counter shown below, Instead of adding one , its adding two times

1 Answers1