ref – https://reactjs.org/docs/hooks-state.html

Initially, there was function components, and class components:
– Functional components does not have state. Nor does it have lifecycle functions.
– Class components have state, and has lifecycle functions.

However, with the introduction of Hooks, in functional components, we now can have state and lifecycle functionality.

Hooks – JS functions that lets you ‘hook into’ React State and LifeCycle features within your functional component.

– DOES NOT work inside class components.
– ONLY call top level. Don’t call hooks inside loops, conditions, standard functions, or nested functions.
– ONLY call from Functional Components.

Many hooks exists. You can even write your own. Let’s take a look at an very basic hook, useState

When would I use a Hook?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!

Hook useState returns a pair of state. A state value, and a setState value.

Whatever name you get first is to get the state property. The second parameter you simply add a set to it to say you want to set this state property.
The 0 is the default value we want to give for our state property.

We use it like so. We declare count value, set its default to 0, and then declare its set functionality setCount.
We then can set it in our JSX.
In order to set new count, we simply use setCount.
In order to use it, we simply use the variable count.

UseEffect

The Effect Hook lets you perform side effects in function components

– Data fetching
– subscribing
– manually changing the DOM

are all examples of side effects. We call these operations “side effects” (or “effects” for short) because they can affect other components and can’t be done during rendering.

The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API. (We’ll show examples comparing useEffect to these methods in Using the Effect Hook.)

When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM.

Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render — including the first render.

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Why is useEffect called inside a component? Placing useEffect inside the component lets us access the count state variable (or any props) right from the effect. We don’t need a special API to read it — it’s already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.

Does useEffect run after every render? Yes!

By default, it runs both after the first render and after every update. Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.

Example

We declare the count state variable, and then we tell React we need to use an effect. We pass a function to the useEffect Hook. This function we pass is our effect. Inside our effect, we set the document title using the document.title browser API. We can read the latest count inside the effect because it’s in the scope of our function. When React renders our component, it will remember the effect we used, and then run our effect after updating the DOM. This happens for every render, including the first one.

Experienced JavaScript developers might notice that the function passed to useEffect is going to be different on every render. This is intentional. In fact, this is what lets us read the count value from inside the effect without worrying about it getting stale. Every time we re-render, we schedule a different effect, replacing the previous one. In a way, this makes the effects behave more like a part of the render result — each effect “belongs” to a particular render.

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once.

This is why React also cleans up effects from the previous render before running the effects next time.

We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.

ref – https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Explanation: Why Effects Run on Each Update

Note – Update in this case means that the useState’s previous and current state are DIFFERENT
If the previous and current state are the same, then React will bail out, and none of the children of the component will be rendered.

If you’re used to classes, you might be wondering why the effect cleanup phase happens after every re-render, and not just once during unmounting. Let’s look at a practical example to see why this design helps us create components with fewer bugs.

Earlier on this page, we introduced an example FriendStatus component that displays whether a friend is online or not. Our class reads friend.id from this.props, subscribes to the friend status after the component mounts, and unsubscribes during unmounting:

But what happens if the friend prop changes while the component is on the screen? Our component would continue displaying the online status of a different friend. This is a bug. We would also cause a memory leak or crash when unmounting since the unsubscribe call would use the wrong friend ID.

In a class component, we would need to add componentDidUpdate to handle this case:

Forgetting to handle componentDidUpdate properly is a common source of bugs in React applications.

Now consider the version of this component that uses Hooks:

This behavior ensures consistency by default and prevents bugs that are common in class components due to missing update logic.

Mount with { friend: { id: 100 } } props
DOM gets updated. Causes previous clean up effect to be called.
There is none, so our to be called after the render.

Update with { friend: { id: 200 } } props
DOM gets updated. Causes returned effect clean up effect to be called.

Render complete, call current effect

Update with { friend: { id: 300 } } props
DOM gets updated. Causes returned cleanup effect function to be called.

Render complete. calls current effect

As times goes by…or when app quits, it will call update one last time.
The previous clean up effect function executes.
Causes returned cleanup effect function to be called.

Optimizing Performance by Skipping Effects

As shown, cleaning up and/or applying the effect after every render might create a performance problem in some cases.

In class components, we can solve this by writing an extra comparison with prevProps or prevState inside componentDidUpdate:

This requirement is common enough that it is built into the useEffect Hook API. You can tell React to skip applying an effect if certain values haven’t changed between re-renders. To do so, pass an array as an optional second argument to useEffect:

In the example above, we pass [count] as the second argument. What does this mean? If the count is 5, and then our component re-renders with count still equal to 5, React will compare [5] from the previous render and [5] from the next render. Because all items in the array are the same (5 === 5), React would skip the effect. That’s our optimization.

When we render with count updated to 6, React will compare the items in the [5] array from the previous render to items in the [6] array from the next render. This time, React will re-apply the effect because 5 !== 6. If there are multiple items in the array, React will re-run the effect even if just one of them is different.

This also works for effects that have a cleanup phase:

Creating basic custom Hook

We create a get and set for our property.
get property is pretty standard so we just leave it.

We can over the set property by declaring another function name and using the default set property function from useState.

After we’re done, we simply create a literal object, insert those properties, and return it

userOrderCount.js

We import it into main. Then simply use those properties as see fit. Put the get into the view.
Put the set as callback of the interactive controls.

App.js