Understanding React Components and Hooks

In this chapter, we will delve into the React components and their fundamental aspects and introduce you to the power of Hooks.

We will explore the essential concept of component data and how it shapes the structure of your React applications. We will discuss two primary types of component data: properties and state. Properties allow us to pass data to components, while state enables components to manage and update their internal data dynamically. We will examine how these concepts apply to function components and illustrate the mechanics of setting component state and passing properties.

In this chapter, we’ll cover the following topics:

• Introduction to React components
• What are component properties?
• What is component state?
• React Hooks
• Maintaining state using Hooks
• Performing initialization and cleanup actions
• Sharing data using context Hooks
• Memoization with Hooks

...

Technical requirements

The code for this chapter can be found here: https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter03

Introduction to React components

React components are the building blocks of modern web and mobile applications. They encapsulate reusable sections of code that define the structure, behavior, and appearance of different parts of a user interface. By breaking down the UI into smaller, self-contained components, React enables developers to create scalable, maintainable, and interactive applications.

At its core, a React component is a JavaScript function or class that returns JSX syntax, which resembles HTML markup. In this book, we will focus mostly on function components, as they have become the preferred approach for building components in recent years. Function components are simpler, more concise, and easier to understand compared to class components. They leverage the power of JavaScript functions and utilize React Hooks to manage state and perform side effects.

One of the primary advantages of using components in React is their reusability. Components can be reused across...

What are component properties?

In React, component properties, commonly known as props, allow us to pass data from a parent component to its child components. Props provide a way to customize and configure components, making them flexible and reusable. Props are read-only, meaning that the child component should not modify them directly. Instead, the parent component can update the props value and trigger a re-render of the child component with the updated data.

When defining a function component, you can access the props passed to it as a parameter:

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
};

In the above example, the MyComponent function component receives the props object as a parameter. We can access the individual props by using dot notation, such as props.title and props.description, to render the data within the component’s JSX...

What is component state?

In React, component state refers to the internal data held by a component. It represents the mutable values that can be used within the component and can be updated over time. State allows components to keep track of information that can change, such as user input, API responses, or any other data that needs to be dynamic and responsive.

State is a feature provided by React that enables components to manage and update their own data. It allows components to re-render when the state changes, ensuring that the user interface reflects the latest data.

To define state in a React component, you should use the useState hook inside of the component. You can then access and modify the state within the component’s methods or JSX code. When the state is updated, React will automatically re-render the component and its child components to reflect the changes.

Before jumping to examples of using state in components, let’s briefly explore what...

React Hooks

React Hooks are a feature introduced in React 16.8 that allows you to use state and other React features in functional components. Before Hooks, state management and lifecycle methods were primarily used in class components. Hooks provide a way to achieve similar functionality in functional components, making them more powerful and easier to write and understand.

Hooks are functions that enable you to “hook into” React’s internal features, such as state management, context, effects, and more. They are prefixed with the use keyword (such as useState, useEffect, useContext, and so on). React provides several built-in Hooks, and you can also create custom Hooks to encapsulate reusable stateful logic.

The most commonly used built-in Hooks are:

• useState: This hook allows you to add state to a functional component. It returns an array with two elements: the current state value and a function to update the state.
• useEffect: This hook...

Performing initialization and cleanup actions

Often, our React components need to perform actions when the component is created. For example, a common initialization action is to fetch the API data that the component needs. Another common action is to make sure that any pending API requests are canceled when the component is removed. In this section, you’ll learn about the useEffect hook and how it can help you with these two scenarios. You’ll also learn how to make sure that the initialization code doesn’t run too often.

Fetching component data

The useEffect hook is used to run “side effects” in your component. Another way to think about side-effect code is that functional components have only one job: returning JSX content to render. If the component needs to do something else, such as fetching API data, this should be done in a useEffect hook. For example, if you were to just make the API call as part of your component function, you would...

Before you begin: Join our book community on Discord

Give your feedback straight to the author himself and chat to other early readers on our Discord server (find the "react-and-react-native-5e" channel under EARLY ACCESS SUBSCRIPTION).

https://packt.link/EarlyAccess

In this chapter, we will delve into the React components and their fundamental aspects and introduce you to the power of Hooks. We will explore the essential concept of component data and how it shapes the structure of your React applications. We will discuss two primary types of component data: properties and state. Properties allow us to pass data to components, while state enables components to manage and update their internal data dynamically. We will examine how these concepts apply to function components and illustrate the mechanics of setting component state and passing properties.In this chapter, we'll cover the following topics:

• Introduction to React Components
• What are component properties?
• What...

Technical requirements

The code for this chapter can be found here: https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter03.

Introduction to React Components

React components are the building blocks of modern web and mobile applications. They encapsulate reusable sections of code that define the structure, behavior, and appearance of different parts of a user interface. By breaking down the UI into smaller, self-contained components, React enables developers to create scalable, maintainable, and interactive applications.At its core, a React component is a JavaScript function or class that returns JSX syntax, which resembles HTML markup. In this book, we will focus mostly on function components, as they have become the preferred approach for building components in recent years. Function components are simpler, more concise, and easier to understand compared to class components. They leverage the power of JavaScript functions and utilize React Hooks to manage state and perform side effects.One of the primary advantages of using components in React is their reusability. Components can be reused across multiple...