score:1
it is because of react.strictmode
if you go to your index.js , you will find that your app
component is wrapped with <react.strictmode>
. if you strip off the strictmode you will notice that your app
component will render only once.
refer the below doc to understand strictmode
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 class component static getderivedstatefromprops method function component bodies state updater functions (the first argument to setstate) functions passed to usestate, usememo, or usereducer
please refer: https://reactjs.org/docs/strict-mode.html
score:-1
return (<react.strictmode><app /><react.strictmode>)
this would solve your problem.
Source: stackoverflow.com
Related Query
- How does React useState hook work with mutable objects
- How does React useState and useCallback hook work when useCallback lacks dependencies
- How does this useState hook work in React?
- How does this React code work on CodePen even if no preprocessor is selected?
- How does React hook useRef() work under the hood? What is that reference exactly?
- React JS - How does this function work to delete JSON data?
- how to create a custom hook on react for this current useState usage
- how does promise and useState really work in React with AWS Amplify?
- How does react useEffect work with useState hook?
- How does setState in React work in this scenario?
- How does useState hook know the calling context in react
- How does prevState in new useState in React work ?? How does it store the value of previous state?
- How to use callback with useState hook in react
- How does shallow compare work in react
- How to prevent race conditions with react useState hook
- How to use React Context with useState hook to share state from different components?
- how can I test if useState hook has been called with jest and react testing library?
- React Hook does not work properly on the first render in gatsby production mode
- How does Express and React Routes work on initial GET request from browser?
- How does React State Hook gets the state variable name from the ES6 Destructuring Assignment
- useState react hook does not set the array state
- How to change/add value of a certain row of an array using useState Hook in React
- How does React Context work by using a function inside of a component
- How does this React example work?
- how does the .render() function in react work internally?
- How to use useState hook in React with typescript correctly?
- How does this arrow function work in my special case passing it through Redux
- Why ES6 ComputedPropertyName does not work with this react js code?
- angular scope vs react state how does it work for data binding
- Can't make this message hook work in React
More Query from same tag
- find size of react component or image before rendering
- Multiple instances of a component shouldn't share state
- React hot loader not realoading after changes
- How to make Material-UI Snackbar not take up the whole screen width using anchorOrigin?
- Shorthand check to map object field value and object key to Tsx element
- Loading images(require) doesn't work using string variable
- property 'yyyx' does not exist on type 'unknown'
- How can I wrap JSON object with a parent object or field?
- Javascript memory optimization when array shifting
- Accessing state in middleware in Redux
- How can I pass a child component's state up to the parent?
- How do I login protect a static html page in node/react?
- Suggestions on text input in Redux-form
- Error Boundaries disables routing inside of a Switch
- Download all images by their URL in React JS to Client
- Disabling the preloader after the data appears on the website
- React, Ruby on Rails: jsx vs html.erb
- componentWillReceiveProps skips loading if page isn't refreshed
- How can i make chart to show price in range?
- Is this an implementation detail? Or is it a feature that should be tested with Jest?
- How can I choose default checkbox at a certain value?
- React Stripe - Map State to Props on a stripe injected component?
- Load images using React/Webpack
- mxGraph connection handler mouse cursor does not change to hand cursor
- Bootstrap not applying even when imported
- React - how to map buttons in a list to the object they are in?
- Jest & Hooks : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
- Creating a Custom Hook to Detect Browser
- Javascript- Locking a string to prevent other methods from changing it
- How to use Leaflet's FeatureGroup with OverlappingMarkerSpiderfier in react-leaflet?