Learning Objectives

• Understand how the client interacts with the back-end.
• Understand what client components are.
• Learn what useState is used for.
• Learn how to deploy on Vercel!

Client Components

By now, you’ve probably heard us talking a lot about client components, and yet we have left you in the dark about what they are.

Client components serve as a way to provide interactivity and separate code that might hold sensitive information such as our environment variables.

Up to this point, you have only been using server components, and despite what the name suggests, client components don’t just run on the client, rather the sections of the component that aren’t interactive are rendered on the server before being sent out.

This allows the website to load faster on the client, and if you don’t understand just yet why this is useful, I would suggest looking at the Next.js documentation for more info.

The biggest change that client components bring is allowing the use of hooks and event handlers!

<aside> 📌 In order to make a component into a client component, you add the following directive to the top of your component: "use client"

</aside>

*it is important to include the quotation marks

Making Your Site Interactive

There are multiple parts to making your website interactive, there are two main ways, through event handlers and hooks.

• Event Handlers
• Hooks

What Is State?

In React, "state" refers to data that represents the current condition of a component at any given point in time. It's a core concept that allows React components to be interactive. Here's a breakdown to understand it better:

• Dynamic Data: State is used to store information that might change over the lifetime of a component. For example, it can hold user input, data retrieved from an API, UI status like open or closed modals, and more.
• Updating State: When state changes (like a user typing in a form), the component re-renders to reflect this new state. React efficiently updates the DOM to match the new state.

<aside> 💡 useState is one of the most used hooks in React, it serves as a way to hold/update information inside of a components similar to how a variable functions in Python / Vanilla JS.

</aside>