Reactivity

/

Introduction

      import { useState, render } from 'react';

function Counter() {
  const [value, setValue] = useState(0);
  
  function inc() {
    setValue(value + 1);
  }
  
  return (
    <div>
      Counter: {value}
      <button onClick={inc}>+</button>
    </div>
  )
}

render(<Counter />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

div {
    display: flex;
    gap: 16px;
    align-items: center;
}

Reactivity

Hooks

useState
controls the state and reactivity of the component
useEffect
controls the side effects and clean up
useMemo
remembers values of expensive computations
... and more

    import { Component, useState } from React;

class MyComponent extends Component {
    state = { count: 1 };
    render() {
        return <div>Count {this.state.count}</div>
    }
}

function MyComponent() {
    const [count, setCount] = useState(1)
    return (
        <div>Count {count}</div>
    )
}

Reactivity

/

useState

      import { useState, render } from 'react';

function Counter() {
  const [value, setValue] = useState(0);
  
  function inc() {
    setValue(value + 1);
  }
  
  return (
    <div>
      Counter: {value}
      <button onClick={inc}>+</button>
    </div>
  )
}

render(<Counter />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

div {
    display: flex;
    gap: 16px;
    align-items: center;
}

Reactivity

/

useState

      import { useState, render } from 'react';

function Counter() {
  const [value, setValue] = useState(0);
  
  function inc() {
    setValue(value + 1);
  }
  
  return (
    <div>
      Counter: {value}
      <button onClick={inc}>+</button>
    </div>
  )
}

render(<Counter />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

div {
    display: flex;
    gap: 16px;
    align-items: center;
}

Reactivity

/

state with Array

      import { useState, render } from 'react';

function Names() {
  const [names, setNames] = useState(["Tomas"]);
  
  function insertName() {
    names.push("Valeria");
    setNames(names)
  }
  
  return (
    <div>
      {names.join(", ")}
      <button onClick={insertName}>+</button>
    </div>
  )
}

render(<Names />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

Let's take a look at a more complex example, where we store arrays in the React state. Similar to our previous example, we initialise the state and state change function, this time storing the array value.
In the state change handler function, we simply push a new string to the state array and store the same array in the state.
Then, we wire our state change handler to the button click ...
And show all the array content, separated by a comma. But when you click on the button, nothing happens! When dealing with React state, the most important thing to realise is that you must provide a different state value to re-render the component. Otherwise, no change will happen. This is simple with atomic values such as string or number but becomes more complicated with objects or arrays, which use object references. React makes only object reference comparisons for performance reasons.
Therefore, to change the state, it is not sufficient to update the array. You have to create a new array to create a new object reference. In this case, we use the convenient spread operator to change the array.
When you click on the plus button now, all is well as react recognises that a state has been updated.
If you do not like the spread operator, you can use the concat function to create a new array combining two provided array. So, please remember that functions such as push, pop, shift or unshift that modify existing array in-place will not work for React state changes and a new object reference to a modified array must be provided.

Reactivity

/

state with Objects

      import { useState, render } from 'react';

function Card() {
  const [person, setPerson] = useState({ 
    name: "Tomas", 
    age: 44 
  });
  
  function increaseAge() {
    person.age += 1;
    setPerson(person);
  }
  
  return (
    <div>
      Name: { person.name  }<br />
      Age: { person.age }
      <button onClick={increaseAge}>+</button>
    </div>
  )
}

render(<Card />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

With objects, situation is the same as with arrays. Changing object properties does not change the object reference and you have to update the state with a new object value. Consider this example.
First, we initialise the state that is an object value, holding name and age of a person.
Then, we define our state handler where we increase the age of the person and store it back to the state. Can you already spot the error?
Then, we show the name and age inside a div.
Last, we wire the button click to the state change handler. But when we click the button, the person's age does not update! Let's fix it.
Let's fix it! The goal is to produce a new state, in our case a new object. We will use the convenient spread operator to create the new state. Similarly you could use the assign function to create a new object but this will do!
When we run our example now, all works as expected!

Reactivity

/

🪝 Custom Hooks

      import { useState, render } from 'react';

type Person = { 
  name: string, 
  gender: string, 
  age: number  
}

function usePersonData(partial: Partial<Person>) {
  const [person, setPerson] = useState<Person>({
    name: "John",
    gender: "male",
    age: 0,
    ...partial
  })
  
  return {
    person,
    setPerson,
    setPartialPerson(partial: Partial<Person>) {
        setPerson({ ...person, ...partial })
    }
  }
}

function NameList() {
  const { 
    person, 
    setPartialPerson 
  } = usePersonData({ name: "Tomas", age: 44 });
  
  function increaseAge() {
    setPartialPerson({
        age: person.age + 1
    })
  }
  
  return (
    <div>
        Name: { person.name  }<br />
        Age: { person.age }
        <button onClick={increaseAge}>+</button>
    </div>
  )
}

render(<NameList />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

Sometimes, you may want to use the same component state repeatedly in your app across many components.
For example, you want to track and modify this user data across more components in your app.
For such purpose, we create a new usePersonData to track user data and we also add some extra functionality to simplify their use.
For example, we will initialise user data with some default values and allow to specify only a subset of required values.
We also add a new method that will allow to specify only a subset of user data that we want to update, simplifying data updates.
Now, we are ready to use this hook. Note that we use object destructuring and not array as in regular hooks, as we return an object from our custom hook, not an array.
We can now use our fancy new method to use partial data to update the state, reducing the need for spread operators.
We can use the data as with a regular hook. Pretty cool, huh? Online, you may find collections of custom hooks simplifying common operations, and reducing the boilerplate in your applications. Let's take a look now at some limits of hooks and the rules we need to follow when using them,

🪝

Rules of Hooks

/

Rule #1

      import { useState, render } from 'react';
const [count, setCount] = useState(0)

function App() {
    return <div>{count}</div>
}

render(<App />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

🪝

Rules of Hooks

/

Rule #1

      import { useState, render } from 'react';

function App() {
    const [count, setCount] = useState(0)
    return <div>{count}</div>
}

render(<App />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

🪝

Rules of Hooks

/

Rule #1

      import { useState, render } from 'react'
function useCounter() {
    const [count, setCount] = useState(0)
    return { count, setCount }
} 

function App() {
    const { count } = useCounter();
    return <div>{count}</div>
}

render(<App />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

🪝

Rules of Hooks

/

Rule #2

      import { useState, render } from 'react'

function App() {
  const [count, setCount] = useState(0)
  
  if (count > 1) {
    const [double, setDouble] = useState(count * 2)
     return (
      <div onClick={() => setDouble(double * 2)}>
        {double}
      </div>
     )
  }
  return (
    <>
      Count:  { count}
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </>
  )
}

render(<App />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

🪝

Rules of Hooks

/

Rule #2

      import { useState, render } from 'react'

function Doubler({ count }) {
  const [double, setDouble] = useState(count)
  return (
   <>
      Double:  { double }
      <button onClick={() => setDouble(double * 2)}>
        +
      </button>
    </>
  )
}

function App() {
  const [count, setCount] = useState(0)
  
  if (count > 1) {
    return <Doubler count={count} />
  }
  return (
    <>
      Count:  { count}
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </>
  )
}

render(<App />)

      body, button { 
    padding: 16px; 
    font-size: 40px; 
}

useState

/

Batching

      import React, { render, useState } from "react";

const BatchingDemo = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  console.log("Rendering");

  const handleClick = () => {
    console.log(
      `Before Updates: ${count1}, ${count2}`
    );

    // Multiple state updates in one event
    setCount1((prev) => prev + 1);
    setCount2((prev) => prev + 1);

    console.log(
      `After Updates:, ${count1}, ${count2}`
    );
  };

  return (
    <div>
      <h1>React State Batching Example</h1>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment Both</button>
    </div>
  );
};

render(<BatchingDemo />);

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

In React, state updates are batched to optimize performance and minimize unnecessary re-renders. Batching means that multiple state updates within the same event are combined into a single re-render. LEt's take a look at the example.
We print the message that the component is rendering.
The console.log prints the stale state (values before the update).
setCount1 and setCount2 are called sequentially. React batches both updates and processes them together in one re-render.
Then, we log the count values and observe their value. Do you think the value changed?
Let's take a look at a console, what we see there once we click the button. The rendering happens only once! The updates happened in batch!
The Before Updates log will show the old values.
The After Updates log will still show stale values because state updates are asynchronous.

Full Stack Development

useState and Hooks

Reactivity

Introduction

Reactivity

Hooks

Reactivity

useState

Reactivity

useState

Reactivity

state with Array

Reactivity

state with Objects

Reactivity

🪝 Custom Hooks

🪝

Rules of Hooks

Rule #1

🪝

Rules of Hooks

Rule #1

🪝

Rules of Hooks

Rule #1

🪝

Rules of Hooks

Rule #2

🪝

Rules of Hooks

Rule #2

useState

Batching