Understanding React.useState in Class Components: Props vs. Local Properties
на канале: vlogize
Learn how `React.useState` should be used within class components, especially focusing on the differences between using props directly and storing them in local properties.
---
This video is based on the question https://stackoverflow.com/q/67516199/ asked by the user 'MamorukunBE' ( https://stackoverflow.com/u/15906783/ ) and on the answer https://stackoverflow.com/a/67516465/ provided by the user 'Drew Reese' ( https://stackoverflow.com/u/8690857/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.
Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React.useState react differently as a prop or as a property?
Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.
If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding React.useState in Class Components: Props vs. Local Properties
When working with React, especially when transitioning from functional components to class-based components, developers often encounter some confusion. One area of common misunderstanding revolves around the use of the React.useState hook, especially when dealing with props as opposed to local properties. This guide aims to clarify these concepts, using an example of a theme toggler component.
The Problem
As a React learner, you might find yourself building a stateful component, like a theme toggler that switches between "light" and "dark" modes. An interesting question arises: When taking a value from props and assigning it to a local variable in a class component, why does it fail to update with changes from state?
The Setup
Let's take a look at the setup for a theme toggler using React. Here’s a simplified structure of our components:
Setting Up Context: We start by creating a context that will help manage our theme state.
[[See Video to Reveal this Text or Code Snippet]]
Creating the Hook: In our main application function, we can use the useState hook to maintain the current theme.
[[See Video to Reveal this Text or Code Snippet]]
Using Context in a Toggler: The ThemeTogglerFunction accesses the context using useContext and passes it down.
[[See Video to Reveal this Text or Code Snippet]]
Class Component Implementation: Lastly, we have our ThemeToggler class component that utilizes these props.
The Core of the Issue
When the context is provided to ThemeToggler, one might think to store the values in local properties like this:
[[See Video to Reveal this Text or Code Snippet]]
Why It Doesn't Work: The primary takeaway is this: once values are assigned to local properties in the constructor, they do not automatically update when the props change. This is primarily because the constructor only runs once during the component's lifecycle, meaning it doesn't track the prop changes afterward.
Solution: Using Lifecycle Methods
To resolve this, you would typically implement the componentDidUpdate lifecycle method to update local state or properties based on prop changes:
[[See Video to Reveal this Text or Code Snippet]]
Key Learning: This process is critical in React as it reflects a foundational concept: props should be considered immutable. Therefore, any changes should be handled through React's lifecycle methods rather than assigning props to local storage or instance variables.
Storing Props is an Anti-Pattern
The practice of saving props into class properties can lead to stale state and various bugs. Instead, you should consume the props directly in the render method or lifecycle methods.
Why Use React.useState?
A common question is: Why create a hook in my app function when React.createContext() seems to already create something that looks like a hook?
The answer lies in the nature of context. Context creates a space to share values but doesn’t itself hold state. When you destructure the context:
[[See Video to Reveal this Text or Code Snippet]]
You are effectively connecting both the state and the function to update that state within the hierarchy of your component tree.
Conclusion
In summary, understanding how to effectively use React.useState in class components, especially in the context of props and local properties, is crucial for building functional, stateful applications. By utilizing lifecycle methods and direct prop usage, you can avoid common pitfalls and create a more robust React application.
Now, go forth and toggle those themes correctly!