●Lifecycles inside React

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Each one of these phases has React methods that get called to perform various things, we won't get further into them, but you can check more about them here.

• Mounting: Means putting elements into the DOM. It has four built-in methods that gets called, in this order, when mounting a component:
  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
• Updating: A component is updated whenever there is a change in the component's state or props. It has five built-in methods that gets called, in this order, when a component is updated:
  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()
• Unmounting: When a component is removed from the DOM. It has only one built-in method that gets called when a component is unmounted:
  • componentWillUnmount()

●Memoization

Memoization is a technique used in computer programming to help speed up programs by storing the results of expensive function calls and returning the cached result when the same inputs to the function are provided again in the future. This can be a useful optimization strategy when a function is called multiple times with the same input, as it allows the program to avoid repeating time-consuming computations and instead quickly return the previously computed result.

●Hydration

Hydration (or rehydration) is the name given to the process in JavaScript frameworks to initializing the page in the browser after it has previously been server rendered. To really understand the concept of hydration in React, first we need to understand a couple of terms:

• ReactDOM

  The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.

• ReactDOMServer

  The ReactDOMServer object enables you to render components to static markup. Typically, it's used on a Node server.

• render() *considered legacy as of React 18

  It returns a reference to the component after rendering a React element into the DOM in the provided container (or returns null for stateless components).

• hydrate() *considered legacy as of React 18

  Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer.

The React Hydration is a technique used that is similar to rendering, but instead of having an empty DOM to render all of our react components into, we have a DOM that has already been built, with all our components rendered as HTML.

●Closure

In React, a closure is a function that has access to variables in its parent scope, even after the parent function has returned. Closures can be used to create and maintain a consistent state between renders, allowing you to keep track of a component's state and props over time. They are often used in combination with event handlers to create dynamic and interactive user interfaces.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  }

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

The increment and decrement functions are closures that have access to the count state variable and the setCount function defined by the useState hook. Each time the increment or decrement button is clicked, the corresponding function is called, which in turn calls setCount to update the count state and re-render the component.

Why are we using prevCount instead of just count?

When we call

setCount(prevCount => prevCount + 1)

setCount(prevCount => prevCount - 1)

It's a way to ensure that you are working with the most recent state value. This is particularly important when your component is being rendered frequently and you don't want to accidentally overwrite a state update that was made by another render.