useState and useEffect React Hooks

components/DisplayUsername.tsx

React components

React components begin as functional stateless components.

functional means you provide some inputs, the computer processes them, and produces some outputs.

stateless means that the the function provides the same response for the same inputs, no matter what state of the world you are in. If you are in New York or Texas, the function should return the same results. Whether it's day or night, the function should produce the same output with the same inputs. If you ran another function beforehand, or forgot to do anything at all, this function should behave the same.

Example: display a person's name on screen in a color

Inputs: name, color

• this component can be called repeatedly as building blocks 🧱
• the same component can be used for different names—you don't have to make a new component each time
• the code is reusable: you could call the component with different colors 🌈
• it doesn't know or care that you told it a different name before
• it doesn't remember if you choose a color for this name

Hooks

We keep the component as simple as possible. Building with simple components is easier, faster, and less confusing than building with complicated components.

Why do we use hooks? The component can become much easier to work with, if we allow it to:

1. know little bits about the state
2. interact with side effects produced by themselves or other functions

useState() hook

If the component is stateless, yet you want it to do different things for different situations, then you have to handle these choices outside of the function. But sometimes, it can be easier for a human to understand and keep track of what's going on, if we allow the component to take a peek at the state and include the logic inside the function rather than outside.

The useState hook is a coding pattern (a pattern means repeatedly using libraries, functions and variables in similar ways) that allows components to ask what state is stored inside a specific variable, and to do something in response. This variable can be set and changed inside or outside of the component itself.

Example: a state variable name which starts out with a value of nobody

Inputs: color

• our component no longer takes name as an input
• somebody enters their name in a different component of the webpage
• that component calls the function setName to update the state variable
• the code in our component becomes simpler for a human to understand

useEffect() hook

Many times we want an interaction with the website to cause the website to do other things. One way to write this in computer code is to link every combination of all the possible behaviors together in a chain, or a branching tree, or a kind of web of instructions. This can get complicated, especially when we allow the user to do many different kinds of things.

An equivalent but simpler way might be to instruct the computer: wait patiently and watch for something to happen...when you notice that this thing has happened, do something. The useEffect hook allows the component to watch for other things happening, and to react whenever those "side effects" occur.

Example: display the user's name in several parts of the website

Inputs: staticColor

• it might be useful to bring the user's attention to their name everywhere it's used, but only when they enter it for the first time or change it
• otherwise, it's too distracting to repeatedly bring attention to their own name

We include a useEffect hook in our component to listen for changes to the name state variable. Upon noticing this side effect, cycle through the colors of the rainbow 🌈 before settling back to the original staticColor.

I hope my examples helped to clarify the basics. These in-depth tutorials + code examples should now be easier to follow:

• W3Schools
• freeCodeCamp
• egghead.io

Please share your thoughts below!