Event binding - Dan Abramov Conference talk

  1. We first store the state variable in this.state as a property, and then we change it using this.setState().
  2. By using useState hooks we can store state within functional components.
  3. It returns both the current state and the function that updates it.
2 Likes
  1. this.state
  2. this.useState
  3. A new state variable and its setter function
2 Likes

Event Binding - Dan Abramov Conference Talk

  1. We store state in a class-based components by setState() function and declare the state variables in the class.

  2. We store state in functional components by using hooks - useState hook.

  3. The return value of the useState call is the variable with the current state value and another function to update this value.

2 Likes

1: In base components state is stored as an object in this.state.

2:In functional components , hooks are used as in useState symbol.

3:The return value in a use state call is the current state with a function used to update it from the old value to the new value.

2 Likes
  1. We store state in class-based components by using setState() or can be set in the constructor by directly setting this.state.
    2.We use hooks or useState to store state in functional components
  2. The return value of a useState call is the current state and a function that will update it.
2 Likes
  1. in class based components state is stored in this.state and is changed by declaring this.setState

  2. in function based components state is stored by using the useState hook

  3. return value of useState is the initial state and another function to update the state

2 Likes
  1. How do we store state in class-based components?
  • State is store as properties in the class variable this.state (can have multiple)
  • The initial state can be set in the constructor by directly setting this.state
  • Subsequent upates to state is one via the function this.setState()
  • Handler change must use bind method to be able to use setState function
  1. How do we store state in functional components?

By declaring state variables with useState(name)

  1. What is the return value of a useState call?
  • useState() returns 2 variables, the first is reference to the value (a getter) and the second a
    setter function for upating the value.
  • need separte calls to useState for each property
2 Likes
  1. We can store state in class-based components using this.state.
  2. We can store state in functional components by using a hook: useState().
  3. The useState call returns a pair of values: the current state and a function that updates it.
2 Likes
  1. this.state and this.setState
    2.utilize a const variable that’s declared with a useState
  2. it returns the current state after it’s function is updated.
2 Likes

Q: How do we store state in class-based components?

A: We store it as an object with this.state in a class-based component.

Q: How do we store state in functional components?

A: We use the react’s useState to store the state in a functional component.

Q: What is the return value of a useState call?

A: A current state and a function that will update it.

2 Likes
  1. We store state in class-based components as objects.

  2. We store state in functional components as hooks. Hooks help to keep our code neat and organized. If we used classes over and over, our code would be messy. The most common hook used in React is useState.

  3. The return of value of a useState call is a current state variable, such as name and surname in Dan’s example.

2 Likes
  1. How do we store state in class-based components?
    The state comes from this.state.

  2. How do we store state in functional components?
    React local state using {useState}.

  3. What is the return value of a useState call?
    The updated state value. In this case the input from setName.

2 Likes

1. How do we store state in class-based components?
We store state in the this.state.something then we can indirectly change the state using this.setState.something
Note: we need to bind “this” to the event handler for this.state.something to work

2. How do we store state in functional components?
We will use react state “hooks” and this is a simplified version of the class-based component. An example of a hook is the useState call

3. What is the return value of a useState call?
The useState call returns two things:

  • The current state

  • A function that updates the state from old value to new value

2 Likes
  1. The initial state of a class-based component is initially stored with this.state = {state} within the constructor. Then it can be modified with this.setState({state}).

  2. With useState():
    const [state, stateUpdaterFunction] = useState(state)

  3. useState() returns the current state and a function that can update it. See example above.

2 Likes
  1. By initializing the state and then using this.setState({ stateKey: stateValue })

  2. By using the useState hook.

  3. It returns the current state, and a function which updates it.

2 Likes
  1. We store a class-based components by using this.state within class-based components.
  2. We store state in functional components via hooks.
    3.The return value of a useState call is the current state and function that updates it.
2 Likes
  1. To store state in class-based components, we use objects.
this.state = {
  age = 18;
}
  1. To store state in functional component, we use react hooks.
const [age] = useState(18);
  1. The return values of a useState call are current state of a variable and a function to update the state.
2 Likes
  1. How do we store state in class-based components?
    this.state & this.setState
  2. How do we store state in functional components?
    by using .useState
  3. What is the return value of a useState call?
    returns the current state
2 Likes
  1. How do we store state in class-based components?
    We add this.state to the constructor.

  2. How do we store state in functional components?
    We use the useState hook.

  3. What is the return value of a useState call?
    An Array of a variable and an update function.

2 Likes
  1. How do we store state in class-based components?
    this.state and this.setState
  2. How do we store state in functional components?
    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.
2 Likes