#topic

Revising useState Hook

Essa anotação abordará o conceito do useState hook em React, sua utilização para gerenciar o estado de componentes funcionais e a atualização de valores de estado.

Working with complex data in useState

In this reading, you will learn how to use objects as state variables when using useState. You will also discover the proper way to only update specific properties, such as state objects and why this is done. This will be demonstrated by exploring what happens when changing the string data type to an object.

Using the useState hooks

• Capture new goals using a form
• Display a list of all goals
• Update the state of the application

Exercise

You've revised the useState hook. You've also learned about working with primitive (string) data and with complex data (state stored in objects).

Solution

What are Side Effects

Before diving into the useEffect hook, let's understand the concept of side effects and their relationship with pure and impure functions within React components.

What is the useEffect hook

You have been introduced to the primary usage of the useEffect hook, a built-in React hook best suited to perform side effects in your React components.

Using the useEffect hook

To showcase the implementation of the useEffect hook within a React component, we'll continue enhancing the Little Lemon app. The restaurant owner wants to improve user interaction by displaying a welcome message on one button click and hiding it on another. Additionally, the owner desires these changes to reflect in the Browser tab where the app is served, constituting a side effect. In this tutorial, we'll demonstrate using the useEffect hook to manage side effects in React and control its invocation with a dependencies array.