score:11
state
and instance properties
serve different purposes. while calling setstate with empty arguments will cause a render and will reflect the updated instance properties, state can be used for many more features like
comparing prevstate
and currentstate
in shouldcomponentupdate to decide whether you want to render or not, or in lifecycle method like componentdidupdate where you can take an action based on state change.
state is a special instance property used by react to serve special purposes. also in setstate
, state updates are batched for performance reasons and state updates happen asynchronously unlike class variable updates which happen synchronously. a class variable won't have these features.
also when you supply a class variable as prop to the component, a change in this class variable can't be differentiated in the lifecycle methods of the child component unless you are creating a new instance of the variable yourself. react does it with state
property for you already.
score:10
both have different purpose. rule of thumb is:
- use
state
to store data if it is involved in rendering or data flow (i.e. if its used directly or indirectly in render method) - use
other instance fields
to store data if value is not involved in rendering or data flow (to prevent rendering on change of data) e.g. to store a timer id that is not used in render method. see timerid example in official docs to understand this valid case.
if some value isn’t used for rendering or data flow (for example, a timer id), you don’t have to put it in the state. such values can be defined as fields on the component instance.
reference: https://reactjs.org/docs/react-component.html#state
Source: stackoverflow.com
Related Query
- What is the difference between React component instance property and state property?
- ReactJs : What is the proper way of accessing the state data in the root component where the link between React and Redux has been implemented?
- What is the difference between React component and React component instance?
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- In React, what is the difference between using functional component and just a function, which returns React node?
- What is the difference between React functional component <Message id> and js function formatMessage() and which one is better to use?
- What is the difference between React Native and React?
- What is the difference between state and props in React?
- What is the difference between NextJs and Create React App
- What is the difference between hashHistory and browserHistory in react router?
- What is the difference between using constructor vs state = {} to declare state in react component?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- What is the main difference between React Query and Redux?
- React - What is the difference between renderToString and renderToStaticMarkup
- React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
- ReactJS - What is difference between component state and class variable?
- ReactJS: what is the difference between functional component and class component
- How does React router works and what is the difference between <link> and<Route>
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What is the difference between useHistory() and props.history in React Route
- what is the difference between getDefaultProps and getInitialState react js
- React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?
- What is the difference between simple, highQuality, balanced for textBreakStrategy property in React Native?
- What is the difference between using constructor vs state = {} in React / React Native?
- What is the difference between owner and parent component in React.js
- What is the real difference between value and defaultValue in React JS?
- What is the difference between a javascript package, node package, and react package?
- What is the difference between React and Preact diff algorithm in depth
More Query from same tag
- React redux search is not working properly
- Setting default value for select field in redux form
- 2 questions.. first is i want the text to change in condition and the other is the button cant be click if meet the condition
- Accessing firestore functions from React useEffect without dependency warning
- how to prevent children component re render, when state/props parent component changing?
- Typescript require the property if other is defined (requiredIf)
- React Binding syntax
- React input, I defined the state into initial state but still get warning changing uncontrolled to controlled input
- Eslint indent with chained methods
- React Typescript Context - issue with mapping object
- Dynamically render information from two arrays
- onBlur is not getting called in Jest Test Cases , React App
- admin on rest: display default value in create form
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- Why does my react page go back without the button being clicked?
- Nested react hooks exposing static references
- How to set border radius ant design
- multiple textfields onChange function issue
- Unable to write script tag which includes some code in React Component
- How do i Include css from static folder in a nextjs react project?
- setState is not permanent
- Webpack unable to bundle due to SyntaxError
- How can I store the data from scanning a QR code in an array using react?
- How can I get a width of html element in React JS?
- How to put useQuery to Promise
- React not refetching expired cached files
- Git repository initialized, how to run npm in terminal, (turn it on or off?)
- How to filter one Json file using another Json file
- page title not available with jest/enzyme for testing react app, how to get the title?
- Inline styles in react doesnt work in print mode