react-state

Question 1

What are hooks in React?

Answer 1

In React, useState, as well as any other function starting with ”use”, is called a Hook.

Hooks are special functions that are only available while React is rendering (which we’ll get into in more detail on the next page). They let you “hook into” different React features.

Question 2

What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)

Answer 2

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.

Question 3

What is the purpose of state in React?

Answer 3

When you call useState, you are telling React that you want this component to remember something:

The state object is where you store property values that belongs to the component

Question 4

Why can’t we just maintain state in a local variable?

Answer 4

Local variables don’t persist between renders. When React renders this component a second time, it renders it from scratch—it doesn’t consider any changes to the local variables.
Changes to local variables won’t trigger renders. React doesn’t realize it needs to render the component again with the new data.

Question 5

What two actions happen when you call a state setter function?

Answer 5

The state setter function (setIndex) which can update the state variable and trigger React to render the component again.