React component rendering twice when using useState hook

Asked
Active3 hr before
Viewed126 times

4 Answers

usingcomponentreact
90%

I humbly request some advise or guidance on a issue I experience with a React component that renders twice when using the useState hook.,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.

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>
  );
}
88%

Functions passed to useState, useMemo, or useReducer (any Hook),Function component bodies,State updater functions

function App() {    const [click, setClick] = React.useState(0);console.log('I render ๐Ÿ˜ก', click);    return (        <div>            <button onClick={() => setClick(click => click + 1)}>                Clicks: {click}            </button>        </div>    )}
load more v
72%

What will happen though when we use a React hook and add some state management to our function component?,Function component bodies,That is why we managed to reproduce double-rendering only in development for a function component that was using React.useState. Cheers!!

We can start by running a brand new CRA installation:

npx create - react - app my - app && cd my - app
load more v
65%

How To Render React Component Element,How To Set React Component State And Props From Browser,React Component Returning Raw Html

Pretag
 Pretag team - issue, fix, solve, resolve

Other "using-component" queries related to "React component rendering twice when using useState hook"