React Hooks Introduction Quiz

12 Questions

What is the main purpose of Hooks in React?

To enable using state and other React features without writing a class

What is the name of the Hook that lets you add React state to function components?

useState

Why are function components now preferred over the name 'stateless components'?

Because they are now capable of having state

What happens when you try to use a Hook inside a class component?

It doesn't work at all

When would you use a Hook?

When you need to add some state to a function component

What is the name of the version of React that introduced Hooks?

React 16.8

What is the purpose of calling useState in a function component?

To declare a state variable and preserve its value between function calls

What is the initial state passed as an argument to the useState Hook?

Any data type

What does useState return?

A pair of values: the current state and a function that updates it

How do we update the state in a function component?

By calling setCount()

What is the difference between reading state in a class and a function component?

In a class, we read state using this.state, while in a function, we use the state variable directly

What is the purpose of the square brackets when declaring a state variable?

To declare a pair of values

Study Notes

Hooks in React 16.8

Hooks are a new addition in React 16.8, allowing the use of state and other React features without writing a class.
Hooks don't work inside classes, but can be used instead of writing classes.

What is a Hook?

A Hook is a special function that lets you "hook into" React features.
useState is a Hook that lets you add React state to function components.

Declaring a State Variable

In a class, the state is initialized in the constructor.
In a function component, useState is called directly to declare a state variable.
The state variable is preserved by React, allowing it to retain its value between function calls.

Using useState

The only argument to useState is the initial state.
useState can be used to store a number, string, or object.
useState returns a pair of values: the current state and a function that updates it.

Reading and Updating State

In a function, the state variable can be used directly to read the current state.
The update function returned by useState can be used to update the state.
This is similar to using this.state.count and this.setState in a class.

Key Takeaways

Hooks allow the use of state and other React features without writing a class.
useState is a Hook that adds React state to function components.
useState declares a state variable that is preserved by React.
useState returns a pair of values: the current state and a function that updates it.