Untitled

As described above, “State” is really just that: The state (i.e. “current snapshot”) of your program or of a part of it — depending on how you look at it.

State is a component’s memory.

We register it as “State” for React by using useState().

This kicks off some internal functionality in React which basically tells React that the component (i.e. a certain part of the UI) should be re-evaluated and possibly updated, if that data changes (which we might do in some function that’s fired when the user clicks a button).

To update a component with new data, two things need to happen:

1. Retain the data between renders.
2. Trigger React to render the component with new data (re-rendering).

In React, when a component’s state or props change, React runs your component function again from the beginning to figure out what should be displayed based on the freshly-set state and props. All the calculated changes are then applied to the DOM (committed). That is, the entire component is recreated, in a sense, but this time the latest state value will be returned from useState. This process is called rerendering. Rerendering is a key feature of React that enables it to efficiently update the user interface in response to changes in the underlying data

Hooks are functions that let you use React features. All hooks are recognizable by the use prefix.

• Use a state variable when a component needs to “remember” some information between renders.

Hooks — functions starting with use—can only be called at the top level of your components or your own Hooks. You can’t call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it’s helpful to think of them as unconditional declarations about your component’s needs. You “use” React features at the top of your component similar to how you “import” modules at the top of your file.

Get Rahulspagidimarri’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Hooks can only be called at the top level of the component function. Here, the first isSent definition follows this rule, but the message definition is nested in a condition.

State should not be mutated

Mutating state is a no-go area in React as it leads to unpredictable results.

According to the React documentation, we should treat state as if it was immutable

That is because if we don’t provide a new object to setState it is not guaranteed to re-render the page. Therefore, we should always provide a new Object for setState to trigger a re-render

state updater function

There are native HTML elements that maintain their own internal state. The input element is a great example. You type into an input and it updates its own value on every keystroke. For many use-cases, you would like to control the value of the input element, i.e., set its value yourself. This is where controlled components come in.

The reason we use id: crypto.randomUUID() in that object is to automatically generate a unique identifier for each education entry you create.

Here’s why it matters:

• 🔑 Uniqueness: crypto.randomUUID() generates a universally unique identifier (UUID). That means every time you call createEducation(), the id will be different, so you can distinguish between multiple entries even if they have the same school or degree values.