Simple React Component Renders twice when using the useState hook

1

Hi there,

I humbly request some advise or guidance on a issue I experience with a React component that renders twice when using the useState hook.

export default function SearchTable(props) {
  const [filterInput, setFilterInput] = useState("");

  const handleFilterChange = e => {
    const value = e.target.value || "";
    setFilterInput(value);
  };

  console.log("Search Component - Value from filterInput ", filterInput);

  return (
    <form noValidate autoComplete="off">
      <TextField
        id="standard-basic"
        label="Search Component"
        value={filterInput}
        // onChange={() => console.log("Search Component Rendered")}  // Using this this "onChange" event, the component only renders once as it does not use the useState hook
        onChange={handleFilterChange}
        placeholder={"Search"}
      />
    </form>
  );
}

See full functional setup below:

CodeSandbox Location

Any assistance appreciated.

Thanks

2

Welcome, asdutoit.

I cannot see why filterInput is being logged twice, but if you log inside the function, you will see it is only being called once.

1 Like
3

The console.log is printed twice on every keydown.
But maybe it is normal, I am just not sure.

4

What I meant is, the App component is being rendered twice with each change. If you console.log() in the SearchComponent component, you will see that it is rendered only once with each change.

So, something is causing the App component to want to re-render. From what I can see, if looks like a CodeSandbox issue.

1 Like
5

Ok so it turns out, (or from my limited grasp of the React hooks topic regarding useState and useEffect), that whenever useState is updated, it triggers a re-render. Some of the other posts online suggested to directly update the “filterInput” variable.
Anyways, I eventually had to implement a complete work around by just simply adding a ternarary operator that only “filterInput” was updated with the correct value.

6

You don’t need a workaround, everything is fine with your solution. As you’re using React Strict mode, some functions intentionally called twice:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

  • Class component constructor , render , and shouldComponentUpdate methods
    …
  • Functions passed to useState , useMemo , or useReducer

Source: https://reactjs.org/docs/strict-mode.html

2 Likes
7

I got the straight answer for this:
in index.js remove this "<React.StrictMode> </ React.StrictMode> " and u will see it rendering only once

1 Like