useState hook introduction in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useState hook in React?

The useState hook lets you add state to functional components. It helps components remember information and update the UI when that information changes.

beginner

How do you initialize a state variable using useState?

You call <code>useState</code> with the initial value inside your component. It returns an array with the current state and a function to update it, like this:<br><code>const [count, setCount] = useState(0);</code>

beginner

What happens when you call the state update function returned by useState?

Calling the update function changes the state value and tells React to re-render the component. This updates the UI to show the new state.

beginner

Can you use multiple useState hooks in one component?

Yes! You can use as many useState hooks as you need to keep track of different pieces of state separately.

beginner

Why do we use array destructuring with useState?

Because useState returns an array with two items: the current state and the function to update it. Array destructuring lets us name these two items clearly in one line.

What does useState return?

A An array with the current state and a function to update it

B A single value representing the state

C A function that returns the state

D An object with state properties

useState returns an array with two elements: the current state value and a function to update that state.

How do you update the state when using useState?

A By directly changing the state variable

B By calling the update function returned by <code>useState</code>

C By reassigning the state variable

D By calling <code>setState</code> method

You must call the update function (like setCount) to change state and trigger a re-render.

Can you use useState inside class components?

A Yes, but only with extra setup

B Yes, it works the same as in functional components

C No, it only works in functional components

D No, because class components don't have state

useState is a hook designed for functional components only.

What is the initial value passed to useState used for?

A It sets the starting state value when the component first renders

B It updates the state every time the component renders

C It is ignored after the first render

D It defines the type of the state variable

The initial value sets the state when the component loads for the first time.

What is the correct way to declare a state variable called 'name' with initial value 'Alice'?

A const name = 'Alice';

B const name = useState('Alice');

C useState('Alice', name);

D const [name, setName] = useState('Alice');

You use array destructuring to get the state and update function from useState.

Explain how the useState hook works in React functional components.

Think about how React remembers and updates information inside a function.

Describe how you would use multiple pieces of state in one React component using useState.

Imagine tracking different things like a counter and a text input separately.