Event binding - Dan Abramov Conference talk

  1. By binding it so we can use it on a certain function
  2. Declaring a variable then using hooks
  3. Depending on what we declare on useState('x')
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?
By using the hook useState, an example of this is :
const [isAuthenticated, setIsAuthenticated] = useState(false)
Your components can bind to the value of isAuthenticated.

3. What is the return value of a useState call?
useState returns an array with 2 elements, and we’re using ES6 destructuring to assign names to them. The first element is the current value of the state, and the second element is a state setter function – just call it with a new value, and the state will be set and the component will re-render.

2 Likes
  1. How do we store state in class-based components?
    By using this.setState to store the state and this.setState to change it

  2. How do we store state in functional components?
    By using the hook useState() to store the state variable

  3. What is the return value of a useState call?
    It returns a variable with the current state value and another function to update that value.

3 Likes

1. How do we store state in class-based components?
we can use this.state and change it with this.setState.

2. How do we store state in functional components?
by using useState hooks.

3. What is the return value of a useState call?
this tells react that it needs to rerender the data that is being put in the braces behind it.

3 Likes
  1. We store the state variable in this.state object and we change it is by calling this.setState.

  2. We use react state hook to store the states.

  3. It returns a pair of values: the current state and a function that updates it.

2 Likes
  1. We use this.state store and this.setState to change the state in class-based components.
  2. In functional components we store the state in a state variable which is set equal to useState and changed with setVariable.
  3. The new value of the state variable after changes have been made
2 Likes

1.) this.setState()
2.) useState()
3.) useState = lets you hook into React features from function components. It calls the value of the current state and the function that calls it

2 Likes
  1. In class-based components we store the state by including a state object in the class constructor, i.e.:
    this.state = {/* state variables and values */}

  2. In functional components we store the state by using React Hooks, e.g.:
    const [count, setCount] = useState(0);

  3. The return value of a useState function call is 1. the most recent state, 2. a function to update this specific state.

2 Likes
  1. How do we store state in class-based components?
    Using this.state and this.setState
    State https://reactjs.org/docs/react-component.html#state
    The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
    setState https://reactjs.org/docs/react-component.html#setstate
    setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

  2. How do we store state in functional components?
    Using useState
    useState https://reactjs.org/docs/hooks-overview.html#state-hook
    useState is a Hook. We call it inside a function component to add some local state to it. React will preserve this state between re-renders. Note that unlike this.state, the state here doesn’t have to be an object — although it can be if you want. The initial state argument is only used during the first render.
    ​​​​​​​

  3. What is the return value of a useState call?
    useState returns a pair: the current state value and a function that lets you update it.

import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
2 Likes

1. How do we store state in class-based components?
To store state in class-based components we use this.state and this.setState.
2. how do we store state in functional components?
Using the useState hook we can store the state in functional components.
3. What is the return value of a useState call?
The return value of a useState call is the current state and the function that updates it.

1 Like

1 - We use this.state to store the state and to change the state we can use this.setState .
2 - We use the useState hook.
3 - The return value of the useState call is its current state and the function to update it.

1 Like

1. How do we store state in class-based components?
First, we declare the object this.state{} within our Class.
Then we create a handler function and use the .bind() method on our handler function to assign its this keyword to the Class constructor()‘s this value.
This allows our handler function containing this.setState() to change the properties of our Class’ this.state.
2. How do we store state in functional components?
We can use React’s .useState hook function to store and access the state. We don’t have to use .bind() on our handler function because it shares scope with the other expressions in the functional component.
3. What is the return value of a useState call?
It returns the value of the state, and a function which obtains the current updated value.

2 Likes
  1. How do we store state in class-based components?
    Using this.state (object)and this.setState
  2. How do we store state in functional components?
    By using the hook useState() to store the state variable
  3. What is the return value of a useState call?
    The return value of a useState call is the current state after it has been updated.
2 Likes
  1. In class-based components: this.state = { name: 'Mary', }

  2. In functional components: const[name, setName] = useState('Mary');

  3. Returns the current state and the function that updates it.

3 Likes
  1. First the state variable need to be stored in this.State object. Then will be changed/updated by calling this.setState

  2. By using a hook, a hook is a function provided by React that lets you hook into React features from your function components. In this case useState(‘Mary’); is the hook

  3. Return value is the current state, after function update.

1 Like
  1. Using this.state and change it with this.setState()
  2. The useState() functional will allow us to store and change state component.
  3. The current value of state and a function to update it.
2 Likes
  1. In class based components we store state as an object in this.state.
  2. In functional components we store state as a value of a variable.
  3. useState call returns a value representing the current state and a function that updates it.
2 Likes
  1. How do we store state in class-based components?
    By using this.state

  2. How do we store state in functional components?
    By using the hook {useState}

  3. What is the return value of a useState call?
    It returns the current state and updates it.

2 Likes
  1. How do we store state in class-based components?
    State is stored by writing this.state and this is then changed by .setState

  2. How do we store state in functional components?
    By using the useState hook available from react.

  3. What is the return value of a useState call?
    It returns the current state and the function that updates the state.

2 Likes
  1. How do we store state in class-based components?
    in class-based components we use props and declare them with this.state.PROPNAME. We can then change the prop with this.setState(function(oldState){ //makeChangesHere }

  2. How do we store state in functional components?
    by utilizing React State Hook (usingState) to store the states. Very nice simplification

  3. What is the return value of a useState call?

A useState call returns the current value (through a pointer ?) and a setter function

2 Likes