-
State is stored in class based components by binding ie this.state and this.setstate
-
Functional components remove the need for binding by using hooks in the React component ie. useState()
-
The return value of a useState call is the current value of the state and a function that updates the state.
-
We have to declare it in the constructor as an object, with this.state{ key: value }.
-
In a function we would use the useState hook and declare a state as a variable.
-
It returns the current state and it also returns the function that updates the state
1 - this.state, this.setState
2 - useState()
3 - current state and function to update it
1. How do we store state in class-based components?
this.state to store the state value and this.setState to modify this value
2. How do we store state in functional components?
useState() to store state
3. What is the return value of a useState call?
It returns a variable with the current state value and another function to update this value
How do we store state in class-based components?
To store the value : this.state
To modify the value: this.setState
How do we store state in functional components?
We use react hook .useState
What is the return value of a useState call?
It returns the current state.
1. How do we store state in class-based components?
We use this.state and this.setState
2. How do we store state in functional components?
We use useState() to store the state
3. What is the return value of a useState call?
The useState call returns the current state and a function to update the state.
1. How do we store state in class-based components?
With this.state and this.setState.
2. How do we store state in functional components?
With useState() or a hook.
3. What is the return value of a useState call?
The current value of the state and a function that updates the state.
- We store state in class based components by using this.state and .setState
- In functional components state is stored using hooks like useState().
- UseState() returns the current states as well as the functions that it updates.
- In the state property of the class
- Using the useState hook
- The current state value as the first argument and the setter function for updating the value as the second argument
-
How do we store state in class-based components?
this.state
we can change this initial state by creating a function that handles an event, using setState() inside of this function, and binding this created function inside of the constructor.this.handleClickEvent = this.handleClickEvent.bind(this);
-
How do we store state in functional components?
In FUNCTIONAL components by usinguseState()
… a hook that taps into the react features and sets an initial value. -
What is the return value of a useState call?
I guess it returns two things, the current state… and the function that changes this current state to its updated state
1.) in an object this.state.
To call it use this.setState
2.) we use a hook like useState()
3.) the current state and a function to update it
-
How do we store state in class-based components?
We can store state in class-based components by storing the state as an object with fields.
State can be initialised through aconstructor
by settingthis.state
.
From there, we can merge values into the object.
When we want to access state, we access it throughthis.state.field
in the jsx code. -
How do we store state in functional components?
With functional components, we can use state hooks by creating individual state variables, e.g.const [field, setField] = useState('value');
.
These hooks can be called and re-rendered by creating a related function:handleFieldChange(x) {setField(x.target.value);}
This differs from class-based components as the function calls and sets state, as opposed changing the field in the state object. -
What is the return value of a useState call?
AuseState
call will return 2 values; the value of the current state, and a function that updates it.
TheuseState
call is a function alternative to the storing state in a class. You can create a state variableage
by executingconst [age, setAge] = useState(0)
. This is similar to aggregating thethis.state.age
, andthis.setState
from a class.
Hi All!
- How do we store state in class-based components?
- I use a special method called setState. This can take either an object or a function. - How do we store state in functional components?
- For Example UseState() hook allows you to create or manage a state variable. - What is the return value of a useState call?
-useState returns a Stateful value and a function to update it.
.1. How do we store state in class-based components?
=> stored into this.state; initialized in constructor; updated elsewhere with setState()
.2. How do we store state in functional components?
=> stored in useState hooks
.3. What is the return value of a useState call?
=> the current state and function to update it
Event Binding - Dan Abramov Conference Talk Answers
-
We store state in class-based components within the constructor as objects. Here we can Initialize key values. We may also utilize setState() to make changes to the state.
-
We store state in functional components using the ‘useState()’ hook, which we then use to declare our state variables. Calling any function attached to one of our declared state variables will cause react to re-render the component (just as if we called ‘setState()’).
-
useState() will return the current value of the state variables.
- How do we store state in class-based components?
this.state
- How do we store state in functional components?
useState()
- What is the return value of a useState call?
It returns the original/current state and ability to update it (a function)
- setState
- useState
- current state variable and a function to update that variable
-
How do we store state in class-based components? Stored as an object in this.state
-
How do we store state in functional components? By using the hook useState
-
What is the return value of a useState call? Returns current state and updates it.
We store data as an object -> this.setState.
we need to use React Hooks to store data -> useState.
useState call returns the current state.
- We store state in class-based components by defining a property “this” in the constructor.
- In functional components we can access and modify state by utilizing the useState() method.
- useState() returns a tuple where the first item is the current state as it exists, and the second item is a method to modify the state.