Event binding - Dan Abramov Conference talk

React Web Development Course
#142
  1. We would use this.setState() and bind event handlers with this.[name of the event handler]

to access the state, you would use this.state.[something].

  1. The state variable is stored within the function component. When we want to access the state, it is already available in the scope ( const [name, setName = useState('')] ).

  2. useState() is a hook, which allows you to hook into react features from within a function component.

1 Like
#143
  1. this.state and this.setState
  2. useState() with hooks
  3. return value after change
#144

Hi everyone!
Glad Ivan live is back every morning :partying_face:

  1. In a class-based component, the state is stored inside this.state.
  2. In a functional component, the new syntax allows you to declare state variables directly within the scope of the function component.
    • Therefore you donā€™t need to write this.state to access state variables any more.
    • The binding of a handler to the state, which is usually done within the class component constructor, is not necessary any more because any handler defined inside the function component can already see the state variables.
  3. The return value of useState() is the tuple [state variable, setter function]. In one single call, useState() defines both the state variable and its setter.
#145
  1. We store state inside the ā€˜this.stateā€™, which is inside the constructor of the component.
  2. To store state in functional components, we use a so-called react hook, which is the react state hook.
  3. It returns a pair of values: the actual state value and the function to set the state variable.
#146
  1. this.setState
  2. useState()
  3. the current state and setter function