Why Use React

React is an open source JavaScript library created by Facebook for building complex user interfaces. It has gained popularity due to its ease of use and flexibility in creating modern web applications.

In conclusion, React’s ease of use and popularity stem from its modularity, Virtual DOM approach, large developer community, and versatility for multi-platform application development. The ability to create reusable components, along with integration with React Native and a comprehensive ecosystem of tools and libraries, makes it an ideal choice for developers looking to create modern and scalable web applications.

React Virtual DOM

In React, the Virtual DOM (Document Object Model) is an in-memory representation of the actual DOM (the HTML representation of elements displayed on the page). When changes are made to a React component, instead of directly updating the actual DOM, React first updates the Virtual DOM, which is a virtual representation of the real DOM. Of course, updating the Virtual DOM is much faster than updating the actual DOM, which is why using it is beneficial.

After updating the Virtual DOM, React performs a process called “reconciliation,” where it compares the new Virtual DOM with the previous version of the Virtual DOM. This process determines the minimal number of changes that need to be made to the actual DOM to reflect the component’s modifications (see example in the next section).

This approach offers several advantages. Firstly, it allows React to optimize the process of updating the actual DOM, resulting in faster and more efficient updates. Additionally, it enables developers to write their components independently of the browser and underlying DOM, making it easier to create complex user interfaces that are consistent across different browsers and devices.

Step 1: Creating the Virtual DOM

React creates a virtual tree using components defined in JavaScript code. Each component describes how a part of the user interface should be displayed based on the application’s state. When the state changes, React regenerates the virtual tree by traversing the components and updating their virtual representations. This step serves as preparation for reconciliation, where React compares the newly created virtual tree with the old one to determine the changes.

Step 2: Reconciliation Process

Reconciliation in React is the process by which React compares the virtual tree representing the current state of the user interface with a previous version to determine which parts of the user interface need to be updated. The goal of reconciliation is to optimize performance by avoiding re-rendering the entire element tree with each update.

Here’s a simple example of reconciliation in React:

Let’s assume we have a React component called App that displays a counter and a button to increment the counter by 1 on each click.

The code in the example that follows will be explained in the next sections. The key point here is to understand how the reconciliation process works.

Now, let’s assume the user clicks the Increment button multiple times. With each click, React updates the counter’s state and triggers a reconciliation process to update the user interface.

For example, let’s say the counter has been incremented by 1, changing from 0 to 1. The virtual tree before and after the update looks like this:

In this example, React notices that only the counter value has changed (0 became 1). It will update the relevant part of the DOM to reflect this change without touching other parts of the DOM.

This is how React optimizes performance by using reconciliation to update only the parts of the user interface that have actually changed, minimizing the number of expensive DOM manipulation operations.

Decomposing an Application into Components

Decomposing an application into components, as suggested by React, is a common practice in software development. This allows for creating a modular structure that facilitates code maintenance, reusability, and understanding.

Here’s a simple example of decomposing an application into components:

Let’s say we want to build an application that displays a list of tasks to do, each with a check box to indicate whether the task is completed or not.

The first step would be to divide the application into two main components: a parent component TaskList and a child component TaskItem.

The parent component TaskList would be responsible for managing the complete list of tasks to do. It would handle retrieving the list data from a data source (e.g., an API or a database), sorting, filtering, and passing them down to the child component TaskItem (see Figure 1-1).

An illustration of the task list includes 3 components labeled task items.

The child component, TaskItem, on the other hand, would be responsible for displaying an individual task. It would display the task name and a check box to indicate whether the task is completed or not. This component would be reusable and display a task item each time it is called by the parent component, TaskList.

Next, we could further decompose the TaskList component into sub-components, such as TaskListHeader (for the list header), TaskListFooter (for the list footer), or TaskListFilter (for managing filters in the list) (see Figure 1-2).

An illustration of the task list includes 3 sub-components for the list header, filter, and footer.

Lastly, we could also decompose the TaskItem component into sub-components, such as TaskName (for displaying the task name), TaskCheckbox (for displaying the check box), or TaskDueDate (for displaying the task due date) (see Figure 1-3).

An illustration of the task list includes 3 sub-components for displaying the task name, checkbox, and due date.

By decomposing our application into components, we have created a modular structure that facilitates code understanding, maintenance, and reusability. Additionally, since each component is responsible for a specific task, it makes debugging easier, as each part can be managed individually.

Creating a First React Application

The simplest way to use React in our applications is to use the create-react-app command, which sets up the minimal architecture of a functional React application.

The create-react-app command becomes available after installing the create-react-app module using the npm command. The npm command is accessible after installing Node.js. Install Node.js if it’s not already installed.

Once the prerequisites are in place, you can enter the “npm install -g create-react-app” command in a command prompt to install the create-react-app module (see Figure 1-4).

A screenshot of the Terminal tab has programming codes. It reads install g create react-app npm warn deprecated. This version of tar is no longer supported. 5 packages are looking for funding. Run n p m fund for details.

Once the module is installed, the create-react-app command is accessible to enable the creation of our React applications.

Let’s then enter the command “create-react-app reactapp”. This command creates the “reactapp” application that will work using React.

After entering this command, the application begins to be created. The application creation process takes some time as the modules required for the application’s functioning are downloaded from the Internet (see Figure 1-5).

A screenshot of the n p m install react window has programming codes. It creates a new react app. It installs react, react dom, react scripts, and cra template.

Then, at the end of the creation of the reactapp application, you will get the screen shown in Figure 1-6.

A screenshot of the C m d dot exe window has programming codes. The text in the codes reads, starts the test runner. Npm run eject removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you cannot go back. c d reactapp. NPM start.

Once the application is created, simply enter the suggested commands in the command prompt: these commands are “cd reactapp”, followed by “npm start”.

The “npm start” command starts an HTTP server based on Node.js, which will allow you to view your React application in a web browser. The server that’s started listens for connections on port 3000, as indicated in the command prompt window in Figure 1-7.

A screenshot of the Windows power shell has programming codes. The deprecation warning is given. The text in the codes reads, starting the development server, compiled successfully. You can now view the reactapp in the browser.

Now, let’s establish a connection with the server by using the URL http://localhost:3000 as shown in the window in Figure 1-8. Type this URL into your web browser.

A screenshot of the React app window. The main menu has the options of File, Edit, History, Bookmarks, Tools, and Help. The window has an icon of the React App.

In the web browser, you will see the “reactapp” application that we created using the “create-react-app” command.

The “reactapp” application is built with React and is located in the “reactapp” directory. Now, let’s explore the files and directories within the application directory.

Analyzing the Main Files of the React Application

The previously displayed page corresponds to the index.html page located in the public directory of the application (with the application itself situated in the reactapp directory).

In the following sections, you’ll find the contents of these two files, starting with the index.js file.

Step 1: Contents of the index.js File

Let’s explore the contents of the index.js file located in the src directory of the application.

Let’s describe the code written in the previous index.js file. We start by importing the core React modules, namely, React and ReactDOM, into the index.js file using JavaScript’s import statements.

The import statement in JavaScript is used to import one or more functionalities from a directory or file where they are defined. Once these functionalities are imported, they become accessible within the module that imports them.

Next, we import the App component from the App.js file using the import statement: “import App from ‘./App’”. We can see the usage of the App component in the parameter of the root.render() method. The root.render() method is used to indicate the HTML code that will be inserted into the HTML element with the id “root”.

The App component is written here in the form <App />, which is the syntax used for writing components with React. This writing style is called JSX and is similar to XML. Notice that we write JSX code without surrounding it with quotes (we write <App /> instead of “<App />”), because what we are writing here is not a string but represents JSX code, which is then transformed into HTML code during the execution of the React program.

The <React.StrictMode> element included in the JSX code of the index.js file allows displaying additional information in the JavaScript console in case of errors. You can find more information at https://react.dev/reference/react/StrictMode.

The JavaScript console is typically displayed by pressing the F12 key on the keyboard.

The element with the id “root” is obtained with the instruction root = ReactDOM.createRoot(document.getElementById(‘root’)). If you view the contents of the index.html file located in the public directory, you will see that the only HTML code in the index.html page corresponds to a <div> element with the id “root” (written as <div id=“root”></div>). It is within this <div> element that the HTML code created during the root.render() method call will be inserted.

Let’s take a look at the contents of the index.html file.

Step 2: Contents of the index.html File

Here is the content of the index.html file in the public directory of the application, where we have highlighted the <div> element:

Step 3: Contents of the App.js File

Let’s now take a look at the contents of the App.js file, which corresponds to the App component. This component is then used in the form <App /> in JSX (see src/index.js).

Let’s describe the content of the preceding App component. It corresponds to a function App() that returns JSX code. This JSX code will be transformed into HTML code when the App component is rendered. The App() function is then exported at the end of the module, making it accessible for other modules that use it (especially in index.js as seen earlier).

Here, we can see that a React component is a simple JavaScript function that returns the JSX code that will be rendered when the component is displayed.

Now, let’s briefly explain what JSX syntax is in React. As it’s a very important topic in React, the next chapter will also be entirely dedicated to it.

JSX Syntax in React

JSX code in React is a syntax that allows you to write UI elements by combining JavaScript and HTML in a familiar and expressive way. This makes creating UIs in React simpler and more readable.

The term JSX stands for JavaScript and XML. The XML elements used here will either be traditional HTML elements written in XML syntax or React components that we create ourselves.

In JSX, you can write UI elements as if you were writing HTML code, but you can also embed JavaScript code inside these elements. This means you can create custom components, manage application logic and state, and interact with data using JavaScript, all while using a familiar syntax to structure your UI.

Here’s an example of JSX in React:

In this example, we have a functional component App that uses JSX to define the structure of the user interface, corresponding here to the <div> element returned by the function. We also use JavaScript variables (such as “name”) to dynamically generate content in our user interface. JavaScript variables used in the JSX code are enclosed in curly braces (like {name}) to indicate that it’s a JavaScript statement we want to evaluate.

The JSX code is then converted into plain JavaScript code to be executed in the browser. This means that JSX code is ultimately interpreted as React function calls to create UI elements.

JSX code is widely used in the React ecosystem because it offers a convenient and concise way to create user interfaces while harnessing the power of JavaScript to manage application logic and state.

JSX code consists of traditional HTML elements like shown earlier, but can also involve React components. Now, let’s see how to create our own React components by following this pattern.

Creating a First React Component

We want to create a Counter component that displays an incrementing counter automatically every second. The component will be used in the form <Counter />. We’ll learn step by step how to create this component.

The App.js file is modified to display the Counter component, used in the form <Counter /> in JSX. The Counter component will be defined in the Counter.js file, located in the same src directory as the App.js file.

Here’s the description of the App.js and Counter.js files:

Let’s also modify the App.css file, which contains the defined styles in the application. We replace the existing lines with these:

A margin of 10px is specified around the HTML page to ensure that displayed texts are not too close to the edges of the window.

The new page is displayed directly in the browser using the URL http://localhost:3000. Below the window (by pressing the F12 key), the console is displayed, allowing you to view texts displayed by console.log() in our programs, as well as any informational or error messages (see Figure 1-9).

A screenshot of the React app window. The counter is set to 0. Components, Profiler, Network, Style Editor, Performance, Memory, Storage, Accessibility, and Application. Options are listed under the Debugger tab.

A helpful tip is displayed in the console, suggesting to download the React DevTools utility, which allows you to visualize React components on the displayed page.

Let’s click the link provided in the console and install this utility in the browser being used.

Step 1: Install React DevTools

React employs a set of specific tools, known as React DevTools, that provide assistance in developing React applications.

Once React DevTools is installed (by clicking the previous link displayed in the console), the console window will have two additional tabs (Components and Profiler tabs) (see Figure 1-10).

A screenshot of the React app window. The counter is set to 0. Components, Profiler, Network, Style Editor, Performance, Memory, Storage, Accessibility, and Application. Options are listed under the Debugger tab.

Let’s select the Components tab from the list. A description of the React components used in the application will appear. The component hierarchy of App and Counter can be found there. This will be particularly useful during application debugging (see Figure 1-11).

A screenshot of the React app window. The counter is set to 0. The Component tab is highlighted. The bottom screen has some programming codes.

Let’s continue writing the program. Now we need to increment the displayed counter, which currently remains at 0. To achieve this, we will use JavaScript’s setInterval() function.

In the following example, the code we are going to write may not be exactly what we would write directly if we knew the internal workings of React. However, the gradual approach we are taking will help us understand how React works by discovering it step by step.

Step 2: Incrementing the Counter with setInterval( )

JavaScript’s setInterval(callback, timeout) function allows us to trigger a process at regular intervals. The process to be executed is specified in the callback function provided as a parameter to the function. The process will be executed at every timeout milliseconds, unless the clearInterval() function is called to stop the recurring process.

Let’s run this program in the browser, displaying the console window to view the value of the counter. This counter value is also displayed on the HTML page using the expression {count} (see Figure 1-12).

A screenshot of the React app window. The counter is set to 0. The Console tab is highlighted. The bottom screen presents Count = 1, Count = 2, Count = 3, Count = 4, and Count = 5.

Each line is displayed twice in the console, hence the number 2 displayed on the right for each line in the console. This is due to the use of React’s strict mode, using the <React.StrictMode> tag in the index.js file. To stop using this strict mode, simply remove the <React.StrictMode> tag surrounding the <App/> tag in the index.js file.

We remove the <React.StrictMode> tag in the index.js file, which becomes as follows:

Now let’s observe the values displayed in the browser window and in the console. We can see that the value of the counter increments in the console, but the display in the browser window remains at 0.

This is normal. To change the value of the “count” variable in the displayed page, the “count” variable must be defined as a reactive variable. Only reactive variables can be modified in the display, once the component is rendered.

For this purpose, React uses a concept called “state”. The state in a component represents the set of reactive variables defined in that component.

To define a reactive variable in a component, we use the useState() method defined in React. Let’s now see how to use the useState() method in a component.

Step 3: Using the useState( ) Method in a Component

The useState() method allows us to define a reactive variable. A reactive variable will be used to display a value in the HTML page, and since the variable is reactive, it can be modified later in the display.

Modifying the value of the reactive variable in the program will automatically update its display. Note that if the variable is not reactive, changing its value will not affect the display.

When a reactive variable is modified in a component, the entire component is re-rendered. The delay between modifying the reactive variable and re-rendering the component is managed by React, and although it’s very short, it’s not instantaneous.

The modification of reactive variables in the display is carried out during the reconciliation process we mentioned earlier.

The useState() method, used to define a reactive variable, is called a “hook”. We will see later that React defines other hooks that will be useful in our programs.

To use the useState() method in a component, simply import it from the “react” module defined in React. The useState() method is indeed exported by the standard “react” module and can be used in a component.

Now let’s explain the previous code:

The import statement allows access to the useState() method defined in the “react” module.

In summary, the “count” variable is read-only. It can only be modified using the setCount(newValue) function. This allows React to update the displayed component, which wouldn’t be possible by directly updating the “count” variable.

Note that when writing the statement [count, setCount] = useState(0), this is a JavaScript shortcut (called array destructuring). This shortcut is a more concise way of expressing the following three lines of instructions:

Instead of using array destructuring for useState(), you could also write the following:

It is obviously simpler and faster to use array destructuring allowed by JavaScript rather than the previous lines.

The variable name (here count) and the update function name (here setCount) are arbitrary and chosen by the developer. It is customary to choose the update function name as “set” followed by the name of the reactive variable.

Notice again that the increment of the “count” variable is now performed by setCount(count+1). If you write count++ instead (or count=count+1), it still won’t work because the update of the displayed component will not be executed.

Let’s see the result obtained in the browser window and also in the console (Figure 1-13).

A screenshot of the React app window. The counter is set to 0. The Console tab is highlighted. The bottom screen presents Count = 0, Count = 1, and Count = 2.

After a certain period of time, a malfunction in the display is observed, which is also visible in the console through the repetitive display of the “count” variable’s value.

Indeed, the setCount() function updates the reactive variable, which triggers the new display of the Counter component.

With each modification of the reactive variable “count”, the Counter component updates and the Counter() function is executed again. This initiates the start of a new timer by executing the setInterval() instruction.

As a result, the setInterval() function is executed again, causing the counter to be displayed multiple times simultaneously. The timer set by setInterval() should be cleared before the reactive variable “count” is updated. The timer will be restarted during the next component display.

React has provided a way to perform a treatment at the end of component initialization (the first display) or before or after each update (subsequent displays, when a reactive variable of the component is modified). We use the useEffect() method, a new hook defined by React, to achieve this. Let’s see how to use useEffect() in our example.

Step 4: Using the useEffect( ) Method in a Component

The treatments to be performed during each component update are indicated in the callback function used as a parameter for useEffect().

Furthermore, the useEffect() method allows for performing a treatment before each display (i.e., before the component is updated). This is what we’re interested in here, as we need to clear the timer before updating the counter in the HTML page.

To perform a treatment before each component update, it is sufficient for the useEffect() method to return a callback function. The treatment indicated in the callback function returned by useEffect() will be executed before each component update.

Let’s use the useEffect() method to clear the timer before each counter display.

Let’s explain the previous lines of code:

The useEffect() method is imported from the “react” module, making it usable in the component.

We incorporate the setInterval() method within the callback function of the useEffect(callback) method. We retrieve the value of the timer returned by setInterval() so that we can use this timer argument in the clearInterval(timer) function call.

Note that the clearInterval() function is used within the callback function returned by useEffect(). This ensures that the timer is cleared before the component is updated. The timer will be reactivated in the subsequent component update.

Let’s verify that the counter is now functioning correctly (see Figure 1-14).

A screenshot of the React app window. The counter is set to 0. The Console tab is highlighted. The bottom screen presents Count = 0, Count = 1, Count = 2, Count = 3, Count = 4, Count = 5, Count = 6, Count = 7, Count = 8, and Count = 9.

The counter increments gradually. However, there is a mismatch between the value displayed on the page (here the value 10) and the one shown in the console (here the value 9). This is due to the fact that updating the reactive variable “count” using the “setCount(value)” statement is not immediate but asynchronous.

We can verify this by updating the value of “count” twice successively within the useEffect() function.

One might expect the counter to increment by 2 every second. However, as shown in Figure 1-15, the counter only increments by 1.

A screenshot of the React app window. The counter is set to 0. The Console tab is highlighted. The bottom screen presents Count = 0, Count = 1, Count = 2, Count = 3, Count = 4, and Count = 5.

The reason for the increment of 1 instead of 2 is that, during the second call to setCount(), we are using a value of the “count” variable that is not the latest updated value. Thus, the second increment uses a value of “count” that is not the one obtained as a result of the update during the first increment, but rather the one obtained during the initialization of the callback function.

To handle these cases where we need the latest value of the reactive variable, we use another form of the setCount() function that takes a callback function as a parameter, in the form setCount(callback), instead of the setCount(value) form. The callback function has the form callback(value), where value is the current value of the variable. The callback function should return the new value of the variable (calculated from the current value value passed as a parameter).

We write it like this:

The “count” parameter of the callback function here represents the current value of the “count” variable. The callback function here returns count+1. This returned value is used in the second call to setCount(), which thus uses the value that was updated during the first call to setCount().

We can see in Figure 1-16 that the counter is now incremented by 2 every second.

A screenshot of the React app window. The counter is set to 0. The Console tab is highlighted. The bottom screen presents Count = 0, Count = 2, Count = 4, Count = 6, Count = 8, Count = 10, Count = 12, Count = 14, Count = 16, and Count = 18.

Using a callback function to update a reactive variable (via setCount(callback)) is necessary when the variable update is performed within a callback function such as the one used by useEffect(callback). This approach allows us to use the most recent value of the reactive variable, rather than an old value.

Let’s now look at how it’s possible to pass parameters to components. For this purpose, we use attributes, also known as props.

Step 5: Using Attributes in Components

It’s possible to pass parameters to a component. Each parameter is defined as an attribute in the component. We also use the term property to designate them. We will see how to write it in the following text.

If we don’t use the “init” attribute in writing the Counter component, consider that the value of the attribute will be replaced by the value 0. This will provide more flexibility when using the Counter component.

Let’s see how to achieve this by writing the Counter component as follows. Attributes are passed as parameters in the component’s creation function, in the form of an object (here named “props”, meaning properties or attributes).

The Counter component becomes as follows:

The Counter() function that defines the component now includes the “props” parameter, making it Counter(props). This allows access to the value props.init within the component’s body, thereby accessing the value of the “init” attribute used in the Counter component.

The value props.init is used to initialize the initial value of the reactive variable “count” in the state, instead of the value 0 as before, by writing the following:

We also use the parseInt(props.init) function to retrieve the specified “init” value as an integer; otherwise, we would get a value as a string if written in the form <Counter init=“5” />. The statement props.init || 0 initializes to the value 0 if the “init” attribute is not present when using the component.

Note that if we write <Counter init={5} /> using a JavaScript value within curly braces, the parseInt() function becomes optional (and even unnecessary) in this case, as the value 5 is passed to the component, not the string “5”.

Let’s modify the App.js file of the App component to use the different forms of writing the “init” attribute of the Counter component. We will insert multiple Counter components on the page, each initialized to a different value.

Note that in the JSX code returned by the component, we write a string surrounded by curly braces (like {“<Counter />”}), because to interpret a string containing a component as a string within JSX code, it needs to be enclosed in curly braces (otherwise, it would be replaced with the HTML code of the component).

A screenshot of the React app window. The counter is defined by, counter init equals 10. The initial value of the counter is 10. The counter is 15. Then, it is 5 and 10, and 0 and 5.

As seen in Figure 1-17, the various forms of attribute value writing are correctly handled, producing the expected results.

It’s common to use ES6 syntax by specifying the component attributes as named properties of a JavaScript object.

Instead of writing

One can also write, in an even more readable way

Using the attributes in the form of an object {init} instead of the props parameter allows us to directly use them within the component. Therefore, we write init instead of props.init when using the “init” attribute in the component.

Conclusion

The first day of our React learning journey was dedicated to creating React components. We learned that components are the fundamental building blocks of React, enabling us to create reusable and modular user interfaces. We also discovered how to create a React component using JSX syntax and how the component’s properties and state can be leveraged to make our user interface dynamic.

Lastly, we witnessed how React is a flexible and powerful library for crafting dynamic and responsive user interfaces. We are ready to continue our journey with React and further explore key concepts of this exciting JavaScript library, especially delving into how to write JSX code more effectively within components.

Using the React.Fragment Component

The JSX code of a React component must have a root element that encapsulates all its descendants; otherwise, a runtime error occurs.

To address this, one could wrap the JSX elements included in the component with an enclosing <div> element. This enclosing <div> element, containing all the HTML elements of the component, will be the one returned by the function that describes the component.

However, this <div> element is artificially added in this case because it’s not actually necessary (except for encapsulation to avoid the error).

To avoid the need to use an unnecessary <div> element in JSX code, React has created a special element that serves to encapsulate all elements in this root element. This root element won’t be displayed in the HTML code returned by the component. This is the role of the React.Fragment component (also referred to as an element).

Let’s see how to use each of these tags in JSX code.

Step 1: Using the <React.Fragment> Tag

Here’s how to use the <React.Fragment> tag in the JSX code of a component.

The React.Fragment component is defined in the “react” module, which needs to be included in order to use this component (hence the import React from “react” statement).

The code placed in comments is surrounded by /* and */ as well as curly braces { and }, as in the line { /* JSX code of the components returned by the component */ }. These curly braces are necessary to indicate that what’s inside corresponds to JavaScript code (a comment is indeed JavaScript code).

Note that the comment is written between /* and */ because if // is used, in that case, the closing curly brace } must be on a separate line (otherwise it would be seen as part of the comment and wouldn’t be considered to end the JavaScript code).

Step 2: Using the <Fragment> Tag

You can also use the <Fragment> tag, which is synonymous with <React.Fragment>. You would write it as follows:

We replace the inclusion of the React module with that of the Fragment feature, but since this feature is not the default export in the “react” module, it’s necessary to name it by enclosing its name in curly braces, in the form import {Fragment} from “react”.

Step 3: Using the <> Tag

Let’s write the same code using the <> tag, which is the condensed equivalent of <React.Fragment> or <Fragment>:

Inclusion from the “react” module is no longer necessary here since the React.Fragment component is not used directly.

Instead, we will use <> and </> to wrap multiple components. However, it is sometimes necessary to use React.Fragment directly, as we will see in the following texts (in cases where we use the key attribute for an element in a list).

Inserting JavaScript Code into JSX

It’s possible to write JavaScript code within JSX, provided that the final result is JSX code. This means that the JavaScript code we write must return JSX code, which will be combined with any existing JSX code. All JSX code will then be transformed into HTML code and displayed in the browser.

The JavaScript code we write must be enclosed in curly braces { and }; otherwise, it will be interpreted as regular HTML code.

Let’s see how to write the main forms of instructions in JSX, namely, conditions and processing loops.

Writing a Condition in JSX

First, let’s show how to write a conditional test that returns different JSX code depending on whether the condition is true or false.

We’ll use the previous counters as an example, adding an “end” attribute to the Counter component to indicate at which value we want the counter to stop. If the “end” attribute is not specified in the component or if it’s set to 0, the counter does not stop. The end value of the counter is displayed below it, with the text “Counter in progress” if the counter is running or the text “Counter stopped” if the counter is stopped. This corresponds to the condition that we need to write in JSX.

The App.js file containing the counters is as follows:

The first counter goes from 5 to 10, the second from 5 to 15, and the third from 0 to infinity.

Let’s first use an immediately invoked JavaScript function.

Step 1: Using an Immediately Invoked JavaScript Function to Write the Conditional Test

The first way to write the condition is to integrate it into an immediately invoked JavaScript function. Calling the function immediately generates the JSX code to be used.

Let’s explain these few lines of code here:

We provide the { init, end } component parameters for the two attributes, init and end, used by the component. The value of end is then displayed in the JSX code of the component.

We display the text “Counter stopped” or “Counter in progress” based on whether the current value of the counter (variable count) is greater than or equal to end or not.

The interesting part involves writing the conditional test. It is integrated into an immediately executed JavaScript function (hence the () at the end of it). Indeed, the JSX code displayed in the component must be the result of one or more JavaScript instructions, which is why an immediately invoked function is used here (which in turn returns the JSX code).

After a few seconds, the first two counters are stopped while the third one continues indefinitely (see Figure 2-1).

A screenshot of a page presents a computer program for a counter stop. It has a react app command in the search button. Counter stopped twice and in progress in the third step.

Note that the immediately invoked function, which returns JSX code, can be replaced by a simple test written in the following form using the JavaScript ternary operator, denoted by a question mark. Let’s examine this now.

Step 2: Using the JavaScript Ternary Operator to Write the Conditional Test

The second form of writing a conditional test involves using the JavaScript ternary operator. It is written in the following form:

Statement 1 is executed if the condition is true, while statement 2 is executed if the condition is false.

The conditional test previously written using an immediately invoked function (see previous section) can then be written as follows:

If the expressed condition is true, the result of the block of instructions is the first JSX code written (the one after the ? but before the :); otherwise, it’s the second one (after the :).

The Counter component file becomes as follows:

This second form of writing (with the ternary operator rather than immediately invoked function) is the most commonly used as it’s the simplest to write.

To obtain JSX instructions as a result of a conditional test, never directly use an if(condition) statement in a block of JavaScript code that is not encapsulated in an immediately invoked function; otherwise, there is no way to return the result.

We have seen how to write conditions, now let’s explore how to perform processing loops.

Writing a Loop in JSX

Continuing our study of JSX, let’s demonstrate how to write a loop that returns JSX code.

Here, we’re looping through three counters, but you could create a loop for a larger number of elements.

Let’s begin by explaining this using the first solution, which involves using an immediately invoked function to write the loop of JSX instructions.

Step 1: Writing the JSX Loop Using an Immediately Invoked Function

As we saw when writing the conditional test, it’s possible to produce JSX code using an immediately invoked function. We wrap this function in curly braces { and }.

Since the App.js file displays the Counter components, it is this file that is modified to write the loop of JSX instructions that display the counters.

The variable jsx (of the Array class) in the immediately invoked function is initialized to an empty array. This variable is used to accumulate the JSX instructions that will be returned by the function. JSX instructions are accumulated in the jsx array variable using the jsx.push() method. The end attribute indicating the end value of the counter corresponds to 10+0 for the first counter, 10+1 for the second, and 10+2 for the third.

Notice the use of backticks ` and ` to open and close a string and the use of JavaScript expressions in the form ${val} to incorporate the value of the val variable into the string.

After running the program and stopping the first and second counters, the displayed page is shown in Figure 2-2.

A screenshot of a page presents a computer program for a counter stop. It has a react app command in the search button. It presents the warning. It is each child in a list should have a unique key property. Check the render method of App.

Although the program is functioning correctly, we intentionally display the console window (by pressing the F12 key on the keyboard) because this window contains valuable information. React recommends adding a special attribute called key for each JSX element displayed via a loop. This key attribute, whose value must be unique for each JSX element displayed in the loop, allows React to handle long lists more efficiently.

Let’s immediately see how to take this valuable advice from React into account, by showing how to use the key attribute in JSX elements displayed by a loop.

Step 2: Using the “key” Attribute in JSX Elements Displayed by a Loop

Let’s see how to integrate the key attribute into each element displayed in the list.

The key attribute can be placed on any JSX element except the one defined by and terminated by. However, you can replace this element with its equivalent <React.Fragment>, provided you import the React object defined in the “react” module (hence the import React from “react” statement).

You can verify that the list now displays in the same way, but without any error messages in the console.

Step 3: Important Rule About the Value of the “key” Attribute in List Elements

The value of each key attribute must be unique in the list, and each list element must always retain the same value for its key attribute (the one previously assigned to it), or errors may occur.

For example, if you use the index of the element in the list as the value of the key attribute, this could lead to potential errors. The index of an inserted element might be the same as that of a previously deleted element. This would cause an error because two different elements would have had the same key attribute value in the list.

It’s also important that each list element always maintains its same key attribute value. If the key attribute is changed for an element, React will treat it as a new element and re-create it, which can impact performance and cause state and rendering issues.

In summary, by following these rules of unique and stable keys, React can efficiently optimize the update of list elements, ensuring optimal performance and preventing display errors.

Step 4: Writing the JSX Loop Using the map( ) Method of the JavaScript Array Class

Now that we’ve covered the main rules for correctly using the key attribute in lists of JSX elements, let’s explore the second way to write a loop of JSX instructions using the map() method of the JavaScript Array class.

Indeed, the map() method of the JavaScript Array class is also commonly used for loops that return blocks of JSX code.

The map(callback) method is used on an array, and for each element in this array, the callback(elem) function is used to return a new element that will replace elem in the final array returned by the map() method.

The map() method allows you to construct a new array from the initial array. In all cases, the new array will contain the same number of elements as the initial array (in contrast, for example, to the filter() method of the JavaScript Array class, which can return fewer elements than in the initial array).

Let’s use the same example as before, where we displayed three counters with different end values.

Instead of using an immediately invoked function as before, let’s now use the map() method to loop from 0 to 2 inclusive. The map() method will return each list element that will be displayed:

Each element of the initial array [0, 1, 2] is passed to the callback function indicated in the map(callback) method. The callback function returns a block of JSX code (the same one we constructed in the previous section with a for loop). The new array constructed as a result of the map() method call will be used to display the App component.

Of course, we’re using the React.Fragment component with the key attribute, as explained in the previous sections.

Step 5: Using the map( ) Method to Display Large Lists of Elements

Let’s now provide some advice for cases where you want to loop using the map() method over a larger number of elements.

We’ll explain as follows how to loop over ten elements using the map() method, but the principle is the same for any number of elements.

So, to loop over ten elements, instead of writing an array of ten elements like [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], you can write

Indeed, Array(10) creates an array of ten empty elements (with a value of undefined). The keys() method on this array returns an Array Iterator object containing keys for each index of the array (i.e., the values 0, 1, 2, …, 9 corresponding to the indices in the array). The spread operator ... in front lists these values, while the square brackets [ and ] transform this result into a JavaScript array.

Finally, if you want to start at 1 instead of 0, you can use the slice() method, like this

Indeed, the slice(1) method allows you to remove the first element from the array (the one containing the value 0). To obtain a sequence of 10 values, you can create an array of 11 elements and keep only the last 10 by removing the first one.

Using Styles in JSX

To conclude our study of JSX, let’s see how to write styles in HTML elements using JSX. For this purpose, we use the style attribute, whose value should be a JavaScript object representing the different style properties and values of the HTML element.

For example, you can specify { color: “red”, fontSize: “15px” }.

The CSS font-size property is written here as fontSize (camelCase notation) when writing the style.

Notice that in JSX, you write style={{ color: “red”, fontSize: “15px” }}, using double curly braces. The first { indicates that you’re using JavaScript code within JSX, while the second { indicates the beginning of the JavaScript object being used.

The Counter component that displays the text “Counter stopped” in red with a font size of 20px then becomes

When the first counter is stopped and the others are still in progress, the display becomes as shown in Figure 2-3.

A screenshot of a page presents a computer program for a counter stop. It has a react app command in the search button. Counter stopped in the first step and is in progress in the next 2 steps.

The text “Counter stopped” in the first counter is displayed in red with a font size of 20px.

Conclusion

The second day of our React learning journey was dedicated to writing JSX code within a React component. We learned how to integrate JavaScript code into JSX to make our user interface more dynamic, using conditional tests and processing loops.

We are now ready to continue our learning journey with React and explore further possibilities offered by this exciting JavaScript library, particularly by learning how to manage user interface events.

Handling Click Events on a Button

First, let’s explore how an event is handled in a React component.

Step 1: Capturing an Event in a React Component

Let’s now delve into how React enables event handling within components. Capturing an event is done directly in the JSX code of the component. If you want to learn more or understand JSX code better, refer to the previous chapter, which explains it in detail.

To capture events in JSX code, you use HTML event attributes by converting their names to camelCase in JSX code.

For example, you would use the onClick attribute to handle a click on an HTML element, or onDoubleClick to handle a double-click. These attribute names correspond to the HTML onclick and ondoubleclick attributes.

The value associated with the attribute points to a JavaScript processing function defined in the React component. In the attribute’s value, you enclose the function name with curly braces { } (because the function name is treated as a JavaScript expression, hence the surrounding curly braces).

For instance, you would write onClick={handleClick} to have the click processing performed in the handleClick() function. This processing function will be defined within the component and can access reactive variables defined by useState() within the component.

Note that you don’t write onClick={handleClick()}. This would mean executing the handleClick() function on every component render, while we want it to be executed only on each button click.

Let’s see a few examples of how to handle events in a React component.

Step 2: Incrementing a Counter by Clicking an Increment Button

To learn how to handle events in React components, let’s start with something simple.

We want to use the counter from the previous chapter (Counter component) but manage its increment by clicking a “count+1” button, instead of incrementing it periodically every second.

The Counter component is modified to handle the click on the “count+1” button. Here, the increment is no longer performed at regular intervals as before but rather triggered by a click on the “count+1” button.

The modified Counter component, now handling the click on the “count+1” button, is as follows:

Let’s emphasize once again on the syntax of the attribute value: you write onClick={incr} and not onClick={incr()}.

Indeed, if you write incr(), it would mean that the function incr() is automatically called every time the component is rendered (because any function call within JSX code is executed during component rendering). To prevent this and ensure that the incr() call only happens upon clicking the button, you simply write {incr}. This way, you’re providing a reference to the click event handling function.

The App component responsible for displaying the counters remains the same (it’s the same file as in the previous chapter):

By incrementing the first counter to its maximum value (10) through clicking the button, the “count+1” button of that counter disappears (Figure 3-1).

A screenshot of React App. The text of the first paragraph reads, Counter 0 is defined by, counter init equals 5, and end equals 10. The initial value of the counter is 5. End of the counter at 10. The counter is 10. Counter stopped.

The program functions correctly, and clicking the “count+1” buttons produces the expected result.

Now let’s look at another example that allows starting a counter, automatically incrementing it by 1 every second.

Step 3: Starting a Periodic Counter by Clicking a Start Button

Instead of clicking the “count+1” button to modify the counter, we now use a Start button that initiates counting until the final value is reached. The Start button disappears when clicked and reappears once the final value is reached, allowing the initiation of a new count.

To achieve this, we utilize a new reactive variable called “start” which indicates whether the Start button should be displayed (start is true) or not (start is false). The Start button is displayed during the initial component rendering (start is initialized to true) and then disappears as soon as the counter begins counting toward its final value (start is set to false).

As explained in Chapter 1, we utilize the useEffect() method to perform an action upon component rendering or update. This enables the initiation of the timer, incrementing the counter every second.

The restart() function manages the click on the Start button. It hides the Start button (start is set to false) and resets the counter “count” to the initial value “init”.

Upon program launch, the counters are paused and ready to start (Figure 3-2).

A screenshot of React App. The text of the first paragraph reads, Counter 0 is defined by, counter init equals 5, and end equals 10. The initial value of the counter is 5. End of the counter at 10. The counter is 10. Counter stopped.

Let’s click the Start button associated with the second counter; it will start counting until it reaches its end value. Here’s the display in progress (Figure 3-3).

A screenshot of React App. The text of the first paragraph reads, Counter 0 is defined by, counter init equals 5, and end equals 10. The initial value of the counter is 5. End of the counter at 10. The counter is 10. Counter stopped.

When the counter reaches the final value (here, 11 for the second counter), the display becomes as shown in Figure 3-4.

A screenshot of React App. The text of the first paragraph reads, Counter 0 is defined by, counter init equals 5, and end equals 10. The initial value of the counter is 5. End of the counter at 10. The counter is 10. Counter stopped.

Once the counter reaches its maximum value, the Start button is displayed again. Clicking this Start button restarts the counter.

Let’s now enhance the program by allowing the counter to start automatically the first time.

Step 4: Automatically Start the Counter the First Time

We want only the first two displayed counters to start automatically, while the following counters will need to be started by clicking their respective Start buttons.

The App component is modified to use the “autostart” attribute in the Counter component.

The value of the “autostart” attribute is calculated based on the value of the displayed counter’s index i.

The Counter component is modified to take the “autostart” attribute into account:

The “autostart” attribute is integrated into the component’s parameters (in addition to the “init” and “end” attributes).

The interesting part of the previous code is the one using the second useEffect() method call. We use a second call to the useEffect() method with an additional parameter, which is an empty array.

Indeed, multiple useEffect() methods can be used within a component. Let’s explain the use of the second useEffect() method call:

In addition to executing the provided callback function as a parameter of useEffect(callback) upon component rendering or update, we can also specify conditions under which the callback function will be executed. For instance, we might want to execute it only during the initial rendering of the component (and not for subsequent updates of the component). To achieve this, we provide an empty array as the second parameter of the useEffect() method. This empty array indicates that the callback function should be executed only during the initial rendering of the component.

Thanks to this parameter set to [], the restart() function will be called only when the component is initially rendered and not during its subsequent updates. This behavior aligns with the desired outcome.

Upon program launch, we verify that the first two counters automatically start (with “autostart” set to 1), while the next one waits for the user to click its Start button (Figure 3-5).

A screenshot of React App. It has some text. Counter 0 is defined by, counter autostart equals 1, counter init equals 5, and end equals 10. The initial value of the counter is 5. End of the counter at 10. The counter is 7. Counter in progress.

In these sections, we have seen how to manage events on a button through several examples. Now, let’s explore how to handle other events related to input fields in an HTML page.

Managing the Content of an Input Field

In this example, we simply want to display and manage an input field. The previous counter is replaced with an input field where any value can be entered. The entered value is also displayed below the input field. It updates as the user types.

The App component is modified to incorporate the new Counter component:

The Counter component displaying the input field becomes:

We use a reactive variable “value” to display the value entered in the field on the page. We achieve this using the onChange attribute, which allows us to receive the event indicating that the value of the field has been modified.

Upon receiving the onChange event on the input field, the change() function is triggered. It retrieves the value entered in the field using event.target.value and then sets this value in the reactive variable value using the setValue() method returned by useState().

Let’s verify that the displayed value changes as we type in the input field (Figure 3-6).

A screenshot of React App. The Main menu has the options of File, Edit, View, History, Bookmark, Tools, and Help. The input fields have some values. Counter 1 4 7 8 9 a b, input value 1 4 7 8 9 a b.

Indeed, with each character entered in the input field, the reactive variable displayed on the screen is appropriately updated.

Now, let’s see how to improve this program by allowing only digits to be entered in the input field.

Step 1: Allow Only Digits During Input

Let’s enhance the previous program by allowing only digits to be entered, as well as allowing movement keys (ArrowLeft, ArrowRight, Tab) and deletion keys (Backspace and Delete). In the previous program, any character could be entered in the input field.

To allow only digits to be entered in the field, we should not use the onChange event, as it detects changes in the field’s content but does not filter based on the pressed key. Instead, we will use the onKeyDown attribute, which indicates that a key on the keyboard has been pressed. Depending on the pressed key, we will decide whether that key is accepted or not.

We use the method event.preventDefault() associated with the event object received as a parameter in the function to reject key presses of non-numeric keys. The preventDefault() method is a JavaScript method associated with Event class objects.

We can confirm that only numeric keys and movement keys are being considered in the field.

Step 2: Give Focus to the Input Field upon Component Rendering

Let’s enhance the previous program by giving immediate focus to the input field upon component rendering (without needing to click it).

We achieve this using the focus() method defined in JavaScript, which is used on the DOM element that we want to give focus to. To do this, we need to access the DOM element from JavaScript or JSX code.

React introduces the concept of references, simply called refs, to address this. React provides the useRef() method, which returns a reference that can be placed in JSX code using the HTML ref attribute.

Let’s modify the Counter component’s code to implement focus management using this functionality:

Let’s explain the previous code:

First, we obtain a reference named refCounter by using the statement refCounter = useRef(). This refCounter reference is also indicated in the JSX code using the ref attribute, where you write ref={refCounter} within the <input> element. This establishes the connection between the JSX code and the JavaScript code earlier.

Next, we need to be able to give focus to the element referenced by refCounter. To achieve this, we use the useEffect(callback, ) method, where we provide an empty array as the second parameter. This empty array signifies that the callback function should only be executed once, after the component is created.

Accessing the referenced DOM element is done via the current property of refCounter, which is refCounter.current. Calling the focus() method on this DOM element gives it focus directly when the component is rendered.

We verify that the input field receives focus immediately upon program launch (Figure 3-7).

A screenshot of React App. The Main menu has the options of File, Edit, View, History, Bookmark, Tools, and Help. The input fields of the counter and input value are blank.

In the following section, we further enhance the program by allowing multiple counters to be displayed, and we display their total sum as digits are entered into the fields.

Step 3: Display Multiple Counters and Show Their Real-Time Sum

Now, we want to display multiple counters and show the total of all counters as digits are entered in the input fields.

For example, with three counters, and entering 10 in the first, 20 in the second, and 30 in the third, a total of 60 will be displayed as in Figure 3-8.

A screenshot of React App. The Main menu has the options of File, Edit, View, History, Bookmark, Tools, and Help. The input fields have some values. Counter 10, input value 10. Counter 20, input value 20. Counter 30, input value 30. total 60.

To achieve this, we modify the App and Counter components. The App component incorporates a new reactive variable named “total”, which will display the total of the three counters. This reactive variable “total” is initialized to 0.

The “total” variable is placed in the state of the App component and is initialized to 0. The setTotal() function returned by useState() is used to update this reactive variable.

This setTotal() function is passed as an attribute to the Counter component so that it can be used to update the displayed total.

The Counter component, which uses the setTotal() function passed as an attribute, becomes as follows:

For example, if we type 30 in the last counter, when entering the 0, we subtract the value 3 from the total and then add the value 30.

Notice that we pass the setTotal() function to the Counter component, but we don’t pass the “total” variable. It’s not necessary to pass the “total” variable because we use the setTotal(callback) function, using the callback function as a parameter to update the total (the total is passed as a parameter in the callback function).

Now, let’s see how to further improve the functionality of this program.

Step 4: Give Focus to the First Displayed Counter

When you launch the previous program, you might notice that the input field of the last displayed counter is the one that gains focus. This is because the Counter component gives focus to the input field, and thus the last displayed counter obtains focus in the end.

Both the App and Counter components are modified. In the App component, we indicate that the first Counter component should receive focus by using the “focus” attribute in that component:

So, we indicate the “focus” attribute in the first Counter component. It is not necessary to provide a value for this attribute; its presence alone is sufficient to indicate that this component should have focus.

The Counter component incorporating the “focus” attribute and assigning focus to the component that uses this attribute becomes

We verify that the first counter now has the focus (Figure 3-9).

A screenshot of React App. The Main menu has the options of File, Edit, View, History, Bookmark, Tools, and Help. The input fields of the counter and input value are blank. Total 0.

Conclusion

The third day of our journey into learning React was dedicated to event handling with React. We learned how to create event handlers in our React components to make our user interface more interactive.

We are now prepared to continue our exploration of React and delve deeper into the possibilities offered by this exciting JavaScript library, as we move on to a comprehensive study of React hooks.

Definition of a Hook

React hooks, introduced in recent versions of React (starting from version 16.8), have simplified the design and programming of React components. They have notably brought reactivity to components defined as JavaScript functions, which previously was only possible with components described as JavaScript classes. This has greatly simplified component programming with React.

In general, a hook corresponds to a method defined in React. To use a hook in a component, you need to import the corresponding method using the JavaScript import statement.

Hooks defined by React all start with the word use, followed by the name of the hook you want to use. For example, useState is used to manage state, that is, reactive variables, while useEffect is used for managing effects. You can also define your own custom hooks and use them like those defined by React.

Main Rule About Hooks

Using hooks sequentially means that they cannot be used, for example, within a condition or a loop. The use instructions associated with hooks must be used directly in the function that defines the component, at the top level of the function.

Regardless of the conditions of use for the component that uses one or more hooks, the order of hook calls inside the component must always be the same and should not be used, for example, within a condition.

Let’s see in the following sections how to use each of these methods. Note that we have already used and explained some of these methods in the previous pages of this book. The goal here is to centralize the explanations to provide a better understanding of how these methods work.

Using the useState( ) Hook

The useState(initValue) method is used to create a reactive variable. A variable is considered reactive if its internal modification (within the program) changes the displayed value in the HTML page wherever that variable is used. React internally uses a process to update the DOM whenever a reactive variable is modified.

The useState(initValue) method can be used to create as many reactive variables as desired. These variables will be local to the component in which they are created. The initValue parameter corresponds to the initial value of the variable. If not specified, the initial value is undefined.

Step 1: Writing the useState( ) Method

It is common to use array destructuring, a feature allowed by recent versions of JavaScript, which can be written as follows:

The variable value corresponds to the value of the reactive variable, while setValue is the function that allows updating this variable using setValue(newValue).

Let’s write a Counter component that increments a variable value upon clicking a button. The variable value represents the counter value and is displayed next to the button.

We have described the Counter component here. It utilizes the reactive variable value which will be incremented upon clicking the button.

The Counter component is then used within the App component. We place it in two locations within the App component, thus displaying two counters. This demonstrates that each Counter component has its own independent reactive variables (separate from other components).

A horizontal rule <hr> separates the two displayed Counter components (Figure 4-1).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar at the top. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 0, Counter hash 2 colon value plus 1 equal to greater than value equal to 0.

Let’s click twice on the first button and three times on the second (Figure 4-2).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar at the top. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 2, Counter hash 2 colon value plus 1 equal to greater than value equal to 3.

This shows that each reactive variable “value” is independent within each component.

Step 2: Using the Latest Value of the Reactive Variable

There are cases where a reactive variable is modified in the program, but its new value is not immediately assigned. For example, if we increment the counter twice in a row with each button click, only the first increment is considered:

Each button click increases “value” by 1 instead of 2 as expected (Figure 4-3).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar at the top. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 1, Counter hash 2 colon value plus 1 equal to greater than value equal to 1.

In this program, when the incrValue() function is called, it updates the value of “value” twice in a row by calling the setValue() function twice. However, each call to setValue() triggers a new component render, but the value update isn’t immediate.

Instead, React schedules the value update for the next render, due to how state updates are handled asynchronously. As a result, when setValue(value+1) is called twice in a row, the value of “value” is actually updated only once.

Reconciliation Process:

When a reactive variable is defined with useState() and modified in the program, the modification isn’t immediately visible because React uses a process called “reconciliation.” This means React compares the new state of the variable with its previous state and determines what has changed. Then, React updates the DOM to reflect those changes.

This reconciliation process is what makes React highly performant, as it updates only the parts of the DOM that need to be updated, rather than reloading the entire page. However, it also means that updates are not instantaneous. This can sometimes lead to issues if parts of the code depend on the current state of the variable before reconciliation is done.

In other words, the second call to setValue() uses the initial value of “value” instead of the value that has just been updated. This means the final value of “value” will only increment by 1 with each click, even if there are two successive calls to setValue().

To avoid this issue, you should use the version of the update function setValue(callback) that takes a callback function as a parameter. The callback function in the form callback(value) will then use the latest value of the “value” variable as a parameter.

It is especially the second increment of the variable using setValue() that requires using it in the form of setValue(callback).

With each button click, the value is now incremented twice (Figure 4-4).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar at the top. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 2, Counter hash 2 colon value plus 1 equal to greater than value equal to 2.

Step 3: Avoiding Infinite Loops When Updating Reactive Variables

When a reactive variable is updated, it triggers an update of the displayed component during the reconciliation process, leading to the execution of the associated component function. However, if a reactive variable is updated during this display, it triggers another update of the display, potentially causing an endless loop.

This can be observed in the following program, which updates the reactive variable “value” during the component display:

The previous program triggers an infinite loop because setValue(1) is called each time the component is rendered. This sets off a chain reaction where the component is constantly updated, leading to an endless rendering loop.

The incrValue() function, triggered when clicking the button, also calls setValue(), but it doesn’t cause an infinite loop because setValue(value+1) is asynchronously invoked (only upon button click) and doesn’t immediately update the value of “value”.

On the other hand, the line setValue(1) outside the incrValue() function is synchronously executed every time the component is rendered, causing the value update to be constantly triggered, creating an infinite loop.

As a result, the Counter component cannot be displayed in the window, and an error message is shown in Figure 4-5 (including in the console).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar at the top. The text on the screen reads, Uncaught runtime errors, error, too many re-renders. React limits the number of renders to prevent an infinite loop. It is followed by a link.

To solve the infinite loop problem in the program using useState(), you can use the useEffect() hook to execute the reactive variable update code under certain conditions. This can be achieved by passing the “conditions” parameter in the dependency array of useEffect(callback, conditions).

The instruction setValue(1) is now executed only once, during the initial display of the component (after it has been rendered). This is because of the “conditions” parameter of the useEffect() method initialized as [], which means to execute the hook’s processing only after the initial component rendering. We can see in Figure 4-6 that the error has disapeared.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 1, Counter hash 2 colon value plus 1 equal to greater than value equal to 1. Below is the console screen with the text cursor.

We can observe that there are no more error messages, either on the screen or in the console, and therefore no more infinite loop. This is achieved thanks to the use of the useEffect() hook.

Using the useContext( ) Hook

The useContext() method allows us to define elements (variables, objects, functions) that can be passed and used in internal components.

To better understand the benefit of this hook, let’s consider a scenario where we want to display the sum of the previous two counters. We will approach this in two different ways: first, without using the useContext() hook and then by using it. But let’s begin by explaining the problem we want to solve. Once the problem is explained, we will proceed to solve it with or without the useContext() hook.

Step 1: Presenting the Problem to Solve

We want to display the sum of the two counters. Each counter can be incremented by clicking the associated button. Clicking the button not only increments the counter’s value but also needs to increment the total sum of the counters, displayed at the bottom of the page.

The sum of the reactive variables defined in each Counter component will be displayed in the App component using a new reactive variable named “total”, which will be updated with each button click.

The App component that displays the total values of the counters becomes as follows:

The “total” variable is managed by useState(), which also returns the setTotal() method for updating the reactive variable “total”.

The Counter component is the same as before. It is reproduced here to show the modifications that will be applied to it later.

We then obtain the display in Figure 4-7. You will notice that the total of the counters (at the bottom of the page) is not being updated after clicking the buttons.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 3, Counter hash 2 colon value plus 1 equal to greater than value equal to 3. Total value is equal to 0.

The total of the counters is not being updated. Indeed, we are using a reactive variable “total” (initialized to 0) that should be incremented with each click on the Counter component’s button. For this purpose, the setTotal() method returned by useState() must be used within the Counter component, as it is the only way to update the reactive variable “total”.

Updating a reactive variable can only be done using the specialized function returned by useState(), at index 1 of the array returned by useState().

The problem is that the Counter component is not aware of the setTotal() method, as it belongs to the parent App component. We will explore how to allow the Counter component to access the setTotal() method using the useContext() hook or without using it.

Let’s start by explaining how to proceed in the case where the useContext() hook is not used.

Step 2: Displaying the Sum of Counters Without Using the useContext( ) Hook

The problem to solve is to enable the Counter component to know about the setTotal() method (which is defined in the parent App component) so that the Counter component can use it when the button “value + 1” is clicked to increment the counter’s value.

If we are not using the useContext() hook, the only way to enable the Counter component to access the setTotal() method defined in the parent App component is to pass this method as an attribute to the Counter component when creating it within the App component.

We use an attribute named setTotal (or any other name, but setTotal is easier to remember for later use) in the Counter component. This attribute setTotal will be initialized to a value that is a reference to the setTotal() function. Therefore, we use the Counter component in the form <Counter setTotal={setTotal} />. The setTotal attribute will now be part of the attributes of the Counter component.

The App component is modified to pass the setTotal attribute to the Counter component:

The setTotal attribute is placed wherever the Counter component is used, which includes when writing the two Counter components.

Then, the Counter component is also modified to consider the setTotal attribute and use it to increment the total of the counters:

Note that the setTotal() function uses the setTotal(callback) form, in which the callback function has the “total” parameter, which represents the current value of the reactive variable “total”. Indeed, there is no other way to know the value of the “total” variable than to use this form of the setTotal(callback) method; otherwise, the “total” variable would be inaccessible (outside of the callback function).

Let’s verify that the total of the counters is now displayed correctly (see Figure 4-8).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 4, Counter hash 2 colon value plus 1 equal to greater than value equal to 5. Total value is equal to 9.

We have seen the first way of passing data to a child component, using attributes. Let’s now explore the second way, which is to use the useContext() hook provided by React.

Step 3: Displaying the Sum of Counters Using the useContext( ) Hook

Instead of passing the setTotal() function as an attribute to the Counter component, we make this function available to all components that are descendants. This means that from the App component, we make the setTotal() function available to child components, here, available in the Counter components used within the parent App component.

Let’s now see how to use each of these two methods, starting with the createContext() method.

Step 4: Using the createContext( ) Method in the Parent Component

Let’s first see how to use the createContext() method in the parent App component.

The createContext() method is first imported from the “react” module. Next, we create a context (here named TotalContext) using the createContext() method. This provides us with the new TotalContext.Provider component, whose value attribute indicates the resources made available to child components.

In this case, we want to make the reactive variable “total” and its setTotal() update function available. To provide other information, you can simply include them in the array placed in the value attribute of the TotalContext.Provider component.

Furthermore, we want the TotalContext context to be accessible in child components, including the Counter component. To achieve this, we need to export this element. Therefore, we replace the export default App statement with export { App, TotalContext } to make both the App and TotalContext objects available.

If you use export { App, TotalContext } instead of export default App in the App.js file, you also need to modify the index.js file, which imports the App component. Replace the import App from ’./App’; statement with import { App } from ’./App’;.

This results in the following modified index.js file:

The desired elements have now been made available in the parent component, and the next step is to use them in the child components. Let’s see how to do that.

Step 5: Using the useContext( ) Method in Child Components

Once the elements are made available in the parent component, the next step is to use them in the child components. To do this, we use the useContext() hook in the child Counter component. The setTotal() function made available will thus be accessible in the Counter component.

The useContext() hook is imported from the “react” module, while the TotalContext context is imported from the App component.

The useContext(TotalContext) method allows us to retrieve the value of the value attribute set in the TotalContext.Provider component. This way, we retrieve the array [total, setTotal], which allows us to use the setTotal() function that modifies the reactive variable “total”.

Let’s verify that the functionality is correct (see Figure 4-9).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 equal to greater than value equal to 3, Counter hash 2 colon value plus 1 equal to greater than value equal to 4. Total value is equal to 7.

Step 6: When to Use the useContext( ) Hook?

As seen earlier, using the useContext() hook requires some preparation in different files to set it up. This approach can be beneficial if multiple components need access to higher-level reactive variables, or if many reactive variables need to be shared with various components.

However, if you only need to provide access to a few reactive variables or components, you might prefer the first solution, which is to pass the reactive variable update function in the attributes of the components that will use it.

Using the useRef( ) Hook

The first use case of useRef() has already been explained earlier. Let’s now examine the second use case in detail.

Let’s demonstrate how to use useRef() to maintain information without using a reactive variable.

The Counter component’s file is modified to handle these two types of variables. This allows us to visualize the difference in behavior between reactive and nonreactive variables.

The value of the variable created using useRef() is obtained through the “current” property of the object returned by useRef(). The variable is initialized to the value specified in the initValue parameter, or to undefined if no value is provided in this parameter.

The file of the App component is restored to its original content, which displays the two Counter components separated by a horizontal line.

Also, the index.js file is restored to its previous version:

The display in Figure 4-10 is obtained.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0.

The “value + 1” button increments the reactive variable “value”, while the “ref + 1” button increments the nonreactive variable “ref”.

Let’s click once each “value + 1” button: the reactive variable “value” displayed next to each button increments upon clicking, which is an expected behavior since updating a reactive variable refreshes the component in which it is used (Figure 4-11).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 0, Counter hash 2 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 0.

Now let’s click once each “ref + 1” button (Figure 4-12).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 0, Counter hash 2 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 0.

We observe that the increment of the nonreactive variable “ref” is not visible on the screen. While the “ref” variable is incremented, since it is not reactive (meaning it doesn’t trigger a re-render of the containing displayed component), its displayed value remains unchanged. To view the updated value of the “ref” variable, you simply need to refresh the component that contains it. To do this, let’s click once the first “value + 1” button (Figure 4-13). This action, which updates the reactive variable “value” of the first displayed Counter component, also triggers the display of the new value of the nonreactive “ref” variable within the refreshed component.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 2, ref + 1 = greater than ref = 1, Counter hash 2 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 0.

We can see that the displayed “ref” variable in the first component has been refreshed, as updating a reactive variable triggers an update of the containing component. Additionally, the “value” variable of this component, being reactive, has also incremented due to the click.

To trigger the update of the “ref” variable in the second Counter component, it is sufficient to update the reactive “value” variable associated with that component. Let’s click the second “value + 1” button (Figure 4-14).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 2, ref + 1 = greater than ref = 1, Counter hash 2 colon value + 1 = greater than value = 2, ref + 1 = greater than ref = 1.

The “ref” variable of the second Counter component has now been updated. The useRef() hook is ideal for storing persistent values without triggering re-renders, providing an alternative to useState(). This makes it perfect for DOM elements, counters, and temporary values. Therefore, useState() is used to manage state affecting display, while useRef() is used for persistence without disrupting the user interface.

Using the useEffect( ) Hook

The useEffect(callback, dependencies) method used within a component allows you to group a set of instructions that will be executed under certain conditions. The instructions to be executed are expressed within the callback function, while the conditions are specified by the dependencies parameter.

It’s possible to use the useEffect() method multiple times in a component, with different instructions specified in each callback function, or different dependencies for each of them. During the initial render of the component, the callback function is always executed regardless of the conditions specified. During subsequent updates of the component, the callback function is executed based on the conditions expressed in the dependencies parameter.

Remember that an update to a component occurs if any of its reactive variables are modified. In all cases, the callback functions registered in the useEffect() methods are executed after the component has been displayed or updated.

Furthermore, each callback function can return a cleanup function that will be executed before the component is updated. This allows for preparation of the following update (e.g., stopping a timer before restarting it later).

Each of the callback functions associated with the aforementioned useEffect() methods displays a message in the console to indicate which counter it is using, which useEffect() method it pertains to, and the values of the variables value and valueRef. In each of the useEffect() methods, we return a cleanup function. Recall that a function returned by useEffect() will be called before the next update of the component. We will display similar console messages as before, to demonstrate the execution of this function.

The App and Counter components are modified to achieve this. Let’s start by describing the App component. It uses a new attribute called “name” in the Counter component, allowing each counter to be named. This helps identify which counter is performing its display or update. It is used as follows:

Here is now the Counter component containing the various uses of useEffect() described earlier:

In addition to the logs used within the useEffect() methods, we display a log outside of the useEffect() methods. This allows us to verify that the code inside the useEffect() methods is executed after the component is displayed or updated.

We also use a new attribute in the Counter component, which is the “name” attribute, passed from the App component. This attribute will display the name of the Counter component that shows the message in the console logs.

Let’s observe the messages displayed in the console based on the button clicks.

Upon launching the program, we have the display in Figure 4-15.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0. Below are details of counters.

Upon launching the program corresponding to the initial display of components, the code outside of any effects is executed first, and then the effects are executed in the order they are written in the component (for each of the components).

In order to clearly view the upcoming console messages, let’s clear the currently displayed messages (by clicking the associated trash button).

Next, we click the “ref + 1” button associated with the first counter. No message is displayed in the console, and no changes appear on the screen. This is normal because the component is not refreshed since no reactive variable has been updated.

Then, let’s click the “value + 1” button associated with the first counter. Since the “value” variable is reactive, the first component is refreshed, and the useEffect() methods are executed (Figure 4-16).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 1, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0. Below are details of counters.

The executed effects are #1 and #3, which correspond to the effect executed in all cases (for effect #1, no expressed conditions) and the effect executed only if “valueRef.current” is modified (for effect #3, with conditions = [valueRef.current]). Indeed, we have modified the value of “valueRef.current” by clicking the “ref + 1” button previously.

Effect #2 is no longer executed, as it only concerns the initial display of the component (this is done using the parameter conditions = []).

We also observe that the functions indicated as the effect’s return are executed before updating the component (value is 0 in the function and then becomes 1 afterward).

Let’s clear the console messages once again, and then let’s directly click the first “value + 1” button of the first counter. Thus, the value of “valueRef.current” is not modified here (Figure 4-17).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 2, ref + 1 = greater than ref = 1, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0. Below are details of counters.

Here, we can observe that effect #3 is no longer executed, as the value of “valueRef.current” (which is part of the conditions for effect #3) is not modified. Only effect #1, executed in all cases, is executed here.

Now that we have examined the useEffect() hook in detail, let’s move on to using the useReducer() hook, which allows us to manage reactive variables in a different way than the previously used useState() hook.

Using the useReducer( ) Hook

The useReducer() hook is used to manage reactive variables in a component without using useState(). The useReducer() hook is employed when we can consider that the new value of one or more reactive variables depends on their previous value and an action to be performed.

For example, when incrementing a reactive variable “value” (as seen before), we can consider that the new value depends on the old value, upon which we perform the increment action. We could also provide a decrement action. Additionally, we could include in an additional parameter of the action the value by which the variable is incremented or decremented.

Let’s use the Counter component, where we’ll use the “value + 1” and “value - 1” buttons to increment or decrement the value of the reactive variable “value”.

We will first use the useState() hook, followed by the useReducer() hook. This will allow us to observe the differences between the two approaches.

Step 1: Counter Component Using the useState( ) Hook

The following are the App and Counter components, using the useState() method to manage the reactive variable “value”.

The App component is as follows:

The Counter component that uses the useState() method is as follows:

We display the two buttons “value + 1” and “value - 1” that update the reactive variable “value”. After clicking multiple times on the buttons of each component, we get the screen shown in Figure 4-18, demonstrating its proper functionality.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 value minus 1 equal to greater than value equal to 4, Counter hash 2 colon value plus 1 value minus 1 equal to greater than value equal to 2.

Now let’s see how to achieve the same functionality using the useReducer() hook instead of useState().

Step 2: Counter Component Using the useReducer( ) Hook

The useReducer(reducer, initState) hook is used to manage the evolution of one or more reactive variables in the component that utilizes this hook. The reactive variables (one or more) managed by useReducer() are grouped into what is called the state, which corresponds to an object or a simple variable (as needed).

When using the useReducer() hook, you first need to determine the variables that will be managed in the state and the actions that will cause them to progress. In our example, we can see that the state is represented by the single variable “value”, while the actions that progress this variable are two actions named “INCR” (for incrementing the value) and “DECR” (for decrementing the value).

It is common to name actions as strings, but any other type of value would work as well, as we will see later.

Let’s see how to use the useReducer() method in the Counter component. The App component remains the same as before.

In our example, we use the dispatch(“INCR”) method to increment the value and the dispatch(“DECR”) method to decrement the value. Calling these two methods triggers the execution of the reducer’s callback function. The callback function uses the two parameters, value (the current value of the state) and action (the action to be executed to modify the state), to calculate and then return the new value of the state.

Let’s verify that the functionality remains identical to the previous example that used useState() (see Figure 4-19).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 value minus 1 equal to greater than value equal to 1, Counter hash 2 colon value plus 1 value minus 1 equal to greater than value equal to 3.

In this example, we used the useReducer() method instead of the useState() method. The useReducer() method offers more possibilities, particularly by allowing the use of a state that groups multiple values together, rather than just a single value as before.

Now, let’s see how to manage state in the useReducer() hook when the state is represented as an object (which groups multiple properties) rather than a single value.

Step 3: Using the “state” Parameter as an Object

The “state” parameter used by the useReducer() method is often an object rather than a simple variable, as previously shown. This allows you to group multiple reactive variables within the same object, using object properties.

We can adapt the previous program to use a state object in the form { value1, value2, ... } instead of a simple variable “value”.

Let’s see how to proceed. The Counter component is modified:

The value of the reactive variable “value” is now stored in an object named “state” in the form { value }. The state contains only the “value” property since we are only managing this variable here, but it could contain other properties if needed.

Note that the state is initialized using this object as { value: 0 }, and access to the “value” property of the state is done everywhere using “state.value”.

The interesting point to note is that the reducer returns the new value of the state, but it doesn’t simply do “return state” as one might think. In fact, when you write “return state”, you are returning a reference to the state object (i.e., its memory address), which is not modified in this case (it’s the content of the memory address that is modified by “state.value += 1”, not the address itself).

So, in order for React to realize that the state has changed (and refresh the displayed component), the memory address of the returned state object needs to be changed. This is achieved by using { ...state }, which creates a new memory object with the same content as the state object.

Step 4: Using the “action” Parameter as an Object

The “action” parameter is currently used as a string, such as “INCR” or “DECR”. We can also use it as an object, which will allow us to provide additional parameters when using the dispatch() method.

For now, let’s consider that the “action” parameter is an object. The name of the action to be performed corresponds, for example, to the “type” property of this object. It’s a common practice to use the “type” attribute to contain the name of the action to be executed.

Let’s modify the previous Counter component to use the “action” as an object { type }.

We verify that the Counter component works in the same way as before (see Figure 4-20).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 value minus 1 equal to greater than value equal to 2, Counter hash 2 colon value plus 1 value minus 1 equal to greater than value equal to 3.

The advantage of passing the action as an object is the ability to add other attributes to the action. For example, we can include the “value” attribute to indicate how much we want to increment or decrement the counter.

Thus, to increment the counter by 10 instead of 1, we would write dispatch({type: “INCR”, value: 10}).

The Counter component is modified to use this new “value” attribute in the action:

And we get the screen shown in Figure 4-21.

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 value minus 1 equal to greater than value equal to 30, Counter hash 2 colon value plus 1 value minus 1 equal to greater than value equal to 20.

Each click on one of the buttons results in an increment or decrement of 10. However, it would be better if the buttons displayed +10 instead of +1, and -10 instead of -1. Let’s use the variables “valueIncr” and “valueDecr” to hold the increment and decrement steps.

The display is now as follows (Figure 4-22).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value plus 1 value minus 1 equal to greater than value equal to 10, Counter hash 2 colon value plus 1 value minus 1 equal to greater than value equal to negative 40.

Other Hooks

We have seen the main hooks provided by React, namely, useState(), useEffect(), useRef(), useContext(), and useReducer().

React offers other hooks with specific functionalities. For example, useCallback() is used to optimize performance by avoiding the re-creation of functions on every component render, while useMemo() allows costly calculations to be memoized for improved performance.

Furthermore, for specific needs, it’s possible to create your own custom hook, which we will explain now.

Creating Your Own Custom Hook

A hook is simply a function. It is recommended to prefix the function name with the word “use” to quickly distinguish the hooks used in our applications.

Since a hook is a function, it can accept 0 to n parameters and return the desired data. Often, a hook returns an array of data, such as with the useState() hook that returns the value of a reactive variable and the function to update it (written concisely as [count, setCount]).

A hook can also utilize other hooks (both those defined in React and those you’ve already created). Of course, the main rule of hooks (sequential usage) applies to our custom hooks as well.

The benefit of creating your own custom hook is to better structure the program that uses it and to be able to reuse it across multiple components.

Let’s explore how to create and use our own custom hooks through a few examples.

Step 1: Creating a Hook to Limit Counter Value

We want to create a hook that limits the value of a counter.

The counters are similar to the ones displayed earlier, but now they have a maximum value which is passed in the “max” attribute of the Counter component.

When clicking the “value + 1” increment button, if the maximum value is reached, an error message appears and the increment becomes impossible. Clicking the “value - 1” decrement button removes the error message and decrements the counter value.

The functionality of the Counter component that uses this hook would be as follows. When the value of the first counter reaches 5 (the value of the “max” attribute), a message appears below it, and the counter is locked at that value (Figure 4-23).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 value minus 1 equal to greater than value equal to 5, Message colon the maximum 5 is reached, Counter hash 2 colon value + 1 value minus 1 equal to greater than value equal to 0.

Both the App and Counter components are modified. The App component becomes the following, which includes the “max” attribute for each counter:

The App component uses two counters. The first counter can increment up to a value of 5, while the second can increment up to a value of 10. This is indicated using the “max” attribute of the Counter component.

Now, we will create the useCounterMax(max) hook, where “max” represents the maximum value the counter should not exceed. We will write the hook in the useCounterMax.js file. This file will later be imported into components that want to use this hook.

To create this hook, we need to ask ourselves the following questions: What are its parameters, and what data or functionalities does it return? These are the questions you should always ask when creating your own hook.

Here are the answers to these two questions:

The parameter of the hook will be the maximum value to reach (“max” parameter).

These four pieces of data will be placed in an array that will be returned by the hook.

Here is the hook described in the useCounterMax.js file:

The hook creates a reactive variable “value” using the useState() hook. The functions incr() and decr() are created and modify the value of the “value” variable. The message associated with the “error” variable is set to an empty string (“”) by default unless the counter value has reached the maximum. Finally, the array [value, incr, decr, error] is returned by the hook. This array can be used in the component that utilizes the hook.

Now, let’s use the new hook in the Counter component:

The hook is imported into the component using the JavaScript import statement. The hook is used by calling it directly as useCounterMax(max). This call returns an array of four values in the order that the hook has positioned them in the returned array. These returned data can then be used in our Counter component.

Notice that the useState() hook is not used directly in the Counter component, but it is now used through the new useCounterMax() hook that we created.

Step 2: Creating a Hook to Force Component Update

We know that a component updates when one of its reactive variables is modified or when a parent component updates.

Sometimes it’s useful to force a component update. For instance, when we previously used the useRef() hook, we noticed that updating the variable returned by useRef() didn’t trigger a refresh of the containing component (see the section “Using the useRef() Hook”). In such cases, we could create a new hook that forces the component update.

Let’s revisit the previously mentioned example that uses the following App and Counter components.

The original App component was as follows:

The Counter component was as follows:

When we run the application and click multiple times on the “ref + 1” button, the value of the “ref” reference doesn’t update with each click. This is because you need to click the “value + 1” button, which updates the reactive variable “value” and triggers a refresh of the component (see Figure 4-24).

A screenshot of the Firefox browser with opened React App. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 1, ref + 1 = greater than ref = 3, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0.

We want to include a new “Refresh” button that updates the displayed “ref” references without modifying the reactive “value” variables.

For instance, you can click multiple times on the “ref + 1” buttons without clicking the “value + 1” buttons. Normally, the “ref” values are not modified with each click, but clicking the “Refresh” button automatically updates them (see Figure 4-25).

A screenshot of the React App window. The texts on the screen read, Counter hash 1 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 3, Counter hash 2 colon value + 1 = greater than value = 0, ref + 1 = greater than ref = 0. At the bottom left is the refresh button.

To achieve this, we create a hook named, for example, useForceUpdate(). It returns the function forceUpdate(), which allows us to update the component in which it is called. If the component contains other components, they are also updated according to React’s internal mechanisms.

Now let’s see how to write the content of the useForceUpdate() hook. The forceUpdate() function it returns should use a reactive variable that is modified with each call of the function. When a reactive variable is modified within a component, it triggers React to update the component (as well as any components included within it).

For this purpose, we use a simple boolean reactive variable that is inverted with each call: if it’s true, we set it to false, and if it’s false, we set it to true. Another approach could be using a counter that we increment with each call, achieving the same component refresh.

The hook is now used in the App component, triggered by clicking the “Refresh” button.

The Counter component remains unchanged.

Step 3: Creating a Hook to Retrieve the Previous Value of a Reactive Variable

The useState() hook allows us to know the current value of a reactive variable and set its next value. However, there are times when it’s useful to know the previous value of this reactive variable.

For instance, let’s use an input field in the Counter component. This field corresponds to a reactive variable that is modified with each character entered. The previous value of the reactive variable corresponds to the content of the field before the last character was introduced. For example, if we’ve entered the characters “abcde” in that order, the previous value of the field would be “abcd”.

We display the previous content of the input field below the input field (Figure 4-26).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar on the top. The options are file, edit, view, history, bookmarks, tools, and help. The texts on the screen read, Current Value colon a b c d e, Previous value colon a b c d.

For this purpose, we create the usePreviousState(state) hook, which returns the previous value of the reactive variable “state” associated with the content of the input field. The reactive variable “state” is modified each time a character is entered into the input field, using the onChange event.

Before describing the content of the usePreviousState() hook, let’s first see how to use it in the Counter component.

The App component that uses the Counter component is as follows:

Let’s now write the content of the usePreviousState(state) hook.

To store the previous value of the “state” variable, we use a reference obtained through useRef(state) which will memorize it. Using a reference rather than a reactive variable to store it prevents an infinite loop: indeed, if we memorize a reactive variable by creating a new reactive variable, the creation of this reactive variable will trigger the creation of another one, and so on indefinitely, resulting in an infinite loop (this was explained in a previous section of this chapter).

The variable “ref.current” holds the previous value of the reactive variable “state” passed as a parameter. This value is returned by the hook, and then the “state” variable is updated with the new value.

We verify that this works as indicated previously. However, a slight issue arises when attempting to clear the content of the field using, for example, the Backspace or Delete key. Indeed, by erasing all the content of the field, the last character is retained in the display of the previous value (Figure 4-27).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar on the top. The text on the screen reads, Current Value colon, followed by an empty input box. Further text reads, Previous value colon a.

The issue stems from the fact that the Counter component doesn’t update when we press Backspace or Delete for a second time when the input field is empty. Indeed, the reactive variable “value” associated with the field is no longer being modified since its value is already an empty string. However, it’s only the modification of a reactive variable that triggers the component update.

To address this, let’s use the previously mentioned “useForceUpdate()” hook. This hook enables component updates through its returned method, forceUpdate(). We should invoke this method when the Backspace or Delete key is pressed during input. For this purpose, we’ll utilize the new onKeyDown event within the input field.

We verify that the previous value is reset to “” (empty) upon the second press of the Backspace key when the input field is empty (Figure 4-28).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar on the top. The text on the screen reads, Current Value colon, followed by an empty input box. Further text reads, Previous value colon with no value.

Step 4: Creating a Hook to Fetch Data from a Server

Here’s a highly useful hook that enables communication with any server. We will make use of the fetch(url) method in JavaScript, which allows us to retrieve data from a server based on the provided URL parameter. The purpose of this hook, named useFetch(url) in this context, will be to fetch data from a server and provide it to requesting components. As an example, we’ll utilize the service provided by the server https://restcountries.com. The URL https://restcountries.com/v3.1/all allows us to retrieve JSON-formatted details about different countries worldwide.

In Figure 4-29, we display this URL, which lets us visualize the characteristics of the first country returned by the service—Barbados, in this case. It’s possible that Barbados might not be the first country displayed when you use this URL, as the server’s display order of countries could have changed since then.

To display the result in the format shown in Figure 4-29, in Firefox, click the Raw Data tab and then the Pretty Print button.

A screenshot of the Firefox browser with an opened link, h t t p s colon double slash rest countries dot com slash v 3 dot 1 slash all service. It has 7 options on the menu bar on the top. Below are 3 options, J SON, Raw Data, and Headers. Rawa Data is selected. The screen has a Javascript code.

To employ the useFetch() hook within our React programs, we will do so using the Countries component, which we will develop gradually according to our needs.

The Countries component is utilized within the App component (in place of the previous Counter component):

Now, let’s describe the useFetch(url) hook, which allows us to retrieve the data provided by the specified URL and return either that data or an error. The return value of this hook is a tuple [data, error] containing the data (data) or the error (error). Each of these two elements is set to null if it doesn’t exist.

The useFetch.js file outlines the useFetch() hook:

First, let’s explain the fetch(url) method. It returns a Promise object, allowing the invocation of the first then() method. The res.text() method also returns a Promise object, enabling the invocation of the second then() method. The catch() method specified at the end is used to handle errors.

Next, let’s explain the two reactive variables, data and error, used here. Why use reactive variables in this case?

Suppose we don’t use reactive variables. The fetch() method makes a server call that returns data or an error, with a certain latency. If the variables returned by the useFetch() method are not reactive, the returned values will be the initial values, not the ones obtained in response from the server (as the latter arrive after the useFetch() function returns these values). While the server data will eventually arrive, the component using them won’t see their modification because the associated variables are not reactive.

If the returned variables are reactive, their subsequent modification will be considered in the component using them, resulting in an update of the server-obtained data in the component.

Finally, let’s explain why we use the useEffect() hook. It allows us to condition the execution of the fetch(url) function on the modification of the url parameter. If the component using useFetch(url) is refreshed, the fetch() method will not be used again because the url parameter remains unchanged.

Now, let’s write the Countries component that uses the useFetch() hook.

If the variables data and error are empty, we display the message “Waiting”. Otherwise, we display the error message returned by error, or the data returned by data.

As explained earlier, the fact that the data and error variables are reactive in the useFetch() hook allows the Countries component, which uses this hook, to benefit from their reactivity and display their value changes if they occur.

Upon launching the program, the screen in Figure 4-30 is displayed.

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar on the top. The options are file, edit, view, history, bookmarks, tools, and help. On the top right are the minimize, maximize, and close buttons. The text on the screen reads, Waiting.

When the data is received from the server, it is displayed instead of the waiting message (Figure 4-31).

A screenshot of the Firefox browser with opened React App. It has 7 options on the menu bar on the top. The options are file, edit, view, history, bookmarks, tools, and help. On the top right are the minimize, maximize, and close buttons. The screen presents a code.

We have seen how to obtain information from the server. Let’s now see how to format it on the displayed page.

Step 5: Creating a Hook for Data Formatting

The information returned by the server was previously displayed directly on the HTML page (in the form of JSON strings) without any formatting. Now, we want to display only the name of each country, in alphabetical order of names.

To achieve this, we create a new hook named useCountries(). This new hook will use the previous useFetch() hook. It will be directly used within the Countries component, replacing useFetch().

The JavaScript-defined method JSON.parse() allows us to transform a string of characters into a JSON-format object, in this case, an array of elements. The map() method enables us to iterate through the elements of this array and return the name of each country, recorded in the name.common property of each element. The resulting array of returned names is then sorted in alphabetical order using the sort() method. Subsequently, the array is returned by the hook to be used within the Countries component.

The Countries component, which utilizes the new hook, becomes as follows:

Once the countries have been passed to the browser, they are displayed on the HTML page in alphabetical order (Figure 4-32).

A screenshot of the Firefox browser with opened React App. The screen has a list of 12 countries. The countries are Afghanistan, Albania, Algeria, American Samoa, Andorra, Angola, Anguilla, Antarctica, Antigua and Barbuda, Argentina, Armenia, Aruba, and Australia.

Now let’s see how to further enhance the Countries component by allowing the filtering of countries based on their names.

Step 6: Creating a Hook That Filters the Displayed Data

We aim to improve the useCountries() hook by passing a string of characters that should be contained in the names of the countries to be displayed. For this purpose, we use an input field displayed above the list of countries. As we type in the input field, the list of countries is updated to display only those whose names contain the entered string (see Figure 4-33).

A screenshot of the Firefox browser with opened React App. The text on the screen reads, Pays colon f r. The screen also has a list of 6 countries. The countries are Central African Republic, France, French Guiana, French Polynesia, French Southern and Antarctic Lands, and South Africa.

The useCountries() hook is modified to use the parameter “name, which will be used to filter the country names containing the string specified by the “name” parameter.

The filter() method defined on the JavaScript Array class allows us to retain only the country names in the “countries” array that contain the specified “name” string. To avoid issues with capitalization, the names are compared after converting them to uppercase.

The Countries component uses the “name” parameter provided by the hook. This “name” parameter is specified in the attributes of the Countries component. The “name” parameter will be passed to the Countries component through the App component, which displays the Countries component.

Now, we need to modify the App component to enable the entry of letters from the country names to be displayed. We insert an <input> element into the JSX code of the App component.

We create the new reactive variable “name” within the App component. It is passed in the attributes of the Countries component. As the variable is reactive, the Countries component will be updated whenever the value of the variable changes, since this reactive variable is passed to it in the attributes.

Conclusion

The fourth day of our React learning journey was dedicated to the use of hooks. We learned how hooks can be used to manage state and component life cycle more efficiently.

Hooks are a powerful tool for managing state and component life cycle in React. We are now equipped to use hooks to make our code cleaner, more efficient, and more easily maintainable. We are ready to continue our React learning journey and explore further the possibilities offered by this exciting JavaScript library, using all the accumulated knowledge to create a task list management application with React.

Application Screens

Let’s start by displaying the screens of our application to explain its functionality. We will write the React code in the remainder of this chapter.

Initially, the task list is empty. The “Add Item” button in Figure 5-1 allows you to insert a new item into the list with each click.

A screenshot of a page of the React app with the menu bar. It has an icon named add item.

Let’s click the “Add Item” button multiple times (three times here, see Figure 5-2).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. The modify and remove icons are present beside each item of the item list.

Each inserted item is assigned an index (starting from 1) in the list (Item 1, Item 2, etc.). A “Remove” button and a “Modify” button are added next to each item in the list.

Let’s click the “Modify” button on the second row (Item 2). The text of the item is replaced by an input field, where the cursor blinks to allow editing (see Figure 5-3).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. Item 2 can be modified using the modify icon.

Let’s edit the text in the input field by typing “Modified Item 2” (Figure 5-4).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. Item 2 is edited using the modify icon.

To apply the modification of the item, you need to exit the input field by clicking elsewhere on the page (Figure 5-5).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. Item 2 is modified. Item 1 and 3 are not modified.

Finally, let’s click the “Remove” button on the first and third rows (Figure 5-6).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents the modified item 2.

Now let’s see how to create this application using React.

Creating the Application with create-react-app

We create the “list” application by entering the command “create-react-app list” in a command prompt. We will use the directory structure created by this command, especially by using or creating new files in the “src” directory of the created application.

A screenshot of a page. It presents the installation program of the new React app. It installs react, react dom, and react scripts with cra template.

Once the application is finished being created, the commands to start the server are displayed at the end of the application creation process (Figure 5-8).

A screenshot of a page. It presents the program where you can run several commands like npm start, npm run build, npm test, and npm run eject.

To start the application located at the URL http://localhost:3000, simply enter the commands “cd list” and then “npm start”.

Breaking Down the Application into Components

Therefore, the App component will encompass the “Add Item” button and the Items component.

To manage the list of items, we will use a reactive variable “items”, which will be an array containing the name of each item in the list.

This reactive variable “items” will be updated whenever an item is inserted, removed, or modified. Since it needs to be accessible when clicking the “Add Item” button located in the App component, we will integrate this reactive variable into the App component.

Let’s start by studying how to add an item to the list.

Adding an Item to the List

We will implement the App, Items, and Item components as described earlier. These components will be adjusted as we incorporate additional functionalities. At this point, our focus will be on handling the click event of the “Add Item” button.

These files are situated in the “src” directory of the “list” application. We will modify the App.js file of the App component and generate the necessary files for the Items and Item components.

The App component is outlined as follows:

Note that the returned JSX code must always have a root element that encompasses all other elements. Since the <button> and <Items> elements don’t have a common root element, we add a fictitious one using <> and </>.

We also modify the App.css file that contains the application styles. We simply want to add a margin of 10 pixels between the displayed elements and the window edges.

Let’s move on to describing the other components of the application. Let’s start with the Items component, which is used to display the list as a whole.

The Items component is as follows:

In the parameter of the Items component, we specify the name of the items attribute that is passed to it, in the form of {items}. This items parameter is then used through the map() method to return the JSX code to be displayed for each item in the list.

For each item in the list, we return a new component, named Item here, to which we pass the text of the item to display (in the item attribute) and the index of the item in the list (in the key attribute), as we know that React requires each element in a displayed list to have a key attribute with a unique value in the list.

Now let’s see the description of the Item component, which is the final component of our application. This Item component displays an item from the list using the “name” attribute (containing the text of the item to display) that is passed to it.

The Item component is as follows:

The Item component displays the text of the list item (contained in the “item” attribute) and the two Modify and Remove buttons, which are currently inactive.

Let’s verify that we can add items to the list by clicking the Add Item button (Figure 5-9).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. The modify and remove icons are present beside each item of the item list.

Insertion into the list works. Now, let’s see how to remove an item from the list.

Removing an Item from the List

Removing an item from the list is done by clicking the Remove button within the Item component. We will create a method named remove() in the Item component that will be responsible for removing the item from the list.

When removing an item from the list, the reactive variable “items” within the App component needs to be updated. This update can only be achieved by using the setItems() function returned by useState() in the App component.

Therefore, the Item component needs to be able to access and update this reactive variable “items”, which is located in a parent component (the App component). To achieve this, we will pass the setItems() method as an attribute. We will introduce a new attribute named, for example, setItems, with a value of {setItems}. This attribute will be passed from the App component to the Items component, and then to the Item component. This will allow the Item component to update the reactive variable “items” located within the App component.

It’s worth noting that we could also use the useContext() hook, which enables data sharing between a component and its children, whether direct or nested. This would eliminate the need to pass the setItems() update function to the other components.

Furthermore, we need to transmit the index of the item to be deleted from the list. To achieve this, we use the “index” attribute within the Item component. This “index” attribute is set within the Items component when creating each Item component.

Please observe that the item’s index is also used with the “key” attribute, but this attribute is internal to React and cannot be directly used within our components.

The App component is modified to incorporate the setItems attribute when creating the Items component within the App component.

The App component now becomes as follows:

The Items component is modified to take into account the setItems attribute that is passed to it, and to add the index attribute when creating each Item component.

The Items component now becomes as follows:

Finally, the Item component is modified to accommodate the handling of the Remove button using the added remove() method within the Item component. The index and setItems attributes are passed to this component.

The Item component now becomes as follows:

The function setItems(), passed through the component’s attributes, becomes accessible within the Item component. The reactive variable “items” is also accessible here by using the callback function within setItems(callback).

To remove an item from the list, it’s sufficient to update the reactive variable “items” using the setItems() function. The filter() method of the Array class allows us to return a new array, where we return true for the elements we want to keep and false for the elements we want to remove. In this case, we are keeping all elements except the one with the specified index attribute.

Furthermore, to trigger an update of the reactive variable, we need to return a new reference of it, hence the creation of a new array using [...items]. This creates a new array with a new memory address, containing the same elements as before.

Let’s verify that this works. We create four items in the list; then we remove the second and third items. Only the first and fourth items remain (see Figure 5-10).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that two items, item 1 and item 4 are added. The modify and remove icons are present beside each item of the item list.

We have seen how to add and remove items from the list. Now let’s see how to modify them.

Modifying an Item in the List

Modifying an item in the list is a bit more complex to implement. Let’s proceed through different steps to understand the requirements.

First, we need to transform the text of the list item into an input field that initially contains the text of the list item. The changes to the program will take place within the Item component.

Step 1: Modifying the Item

To display either an input field or plain text (depending on whether the Modify button has been clicked or not), we use a new reactive variable named “modifyOn”, which is a boolean variable set to true if the input field is displayed (Modify button clicked) or false if only the plain text is displayed (Modify button not clicked). This reactive variable “modifyOn” is initialized to false and becomes true when the Modify button is clicked.

Using a reactive variable allows us to dynamically change the display when the variable is modified, which is the role of a reactive variable.

Therefore, the Item component becomes as follows. It will be further modified in the following pages to progressively reach the final goal for better understanding.

As explained earlier, we use the reactive variable “modifyOn” initialized to false. This variable is modified when clicking the Modify button, within the modify() function triggered by the Modify button click.

The JSX code of the component utilizes the value of the reactive variable “modifyOn” to display either the input field or the text element. In both cases, we display the value of the item {name} within the input field or the text element.

Let’s execute this program while also displaying the console using F12, which contains any potential error messages. We insert an item and then click the Modify button (Figure 5-11).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents the space to add item 1. It presents the warning massage under the console.

We observe that clicking the Modify button toggles the display between the input field and the element as text. Indeed, modifying a reactive variable (here, modifyOn) within the component triggers the component’s update and therefore its re-rendering. The message in the console (in this case, a warning) informs us that we need to implement the onChange event in the input field. Since we initialized the “value” property of this field, we also need to handle its potential changes.

Let’s implement the handling of the onChange event in the input field. For now, we are displaying its content in the console (i.e., the value of event.target.value).

Let’s type characters into the input field, for example, “a”, then “b”, then “c”, then “d”, and finally “e” (see Figure 5-12).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents a space to add the item 1. It presents the list of 5 items under the console button.

We can see that the characters are captured correctly by the onChange event but are not visible in the input field, which remains unchanged. Indeed, to modify the input field, we need to update the component’s display, as the input field’s “value” property is initially set to the initial value, which is the text of the item, that is, {name}. The “value” property of the input field needs to reflect the current value in the input field for each typed character.

To achieve this, we use a new reactive variable, here named “text”, which will be used to store and display the value in the input field.

Let’s use the reactive variable “text” within the Item component to handle the modification of the input field:

The “text” variable is updated as characters are typed, triggered by the onChange event. This “text” variable is reactive and is the one displayed in the JSX code instead of the “name” variable, which is not reactive. This enables the updating of the text displayed in the input field for each typed character.

Let’s display the input field and enter characters as before. We can see that the typed characters are correctly displayed in both the console and the input field (Figure 5-13).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents a space to add the item 1 a b c d e. It presents the list of 5 items under the console button.

Next, let’s proceed to the next step, which involves considering the modification of the input field.

Step 2: Validation of the Modification

Let’s modify the Item component to incorporate these changes.

We have also added a console log displaying the reactive variable “items” after each removal of an item from the list. This helps verify if the removal is still functioning correctly.

Let’s insert three items into the list and then remove the first item from the list. Observe the value of the reactive variable “items” displayed in the console and compare it with the list displayed on the page (see Figure 5-14).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that two items are added. The modify and remove icons are present beside each item of the item list. It presents the array of item 2 and item 3.

We observe that the “items” variable in the console matches the expected outcome, but the display is not updated! It still includes the first list item even though it should have been removed.

What could be the reason for this inconsistency?

In React, the “key” attribute is used to help React identify each item in a list. When React updates the contents of a list, it compares the new list to the old one based on the keys (“key” attributes) of the list items. This enables React to determine which item was added, removed, or modified. It’s important for each list item to have a unique key, as this allows React to distinguish each item and update them correctly in case of changes. If two items have the same key, React won’t know which one to update, potentially leading to unexpected behavior.

Furthermore, each list item should always maintain the same key it was previously assigned. This ensures that React doesn’t create new items every time a list is updated, which could lead to performance issues.

In summary, the use of unique and consistent keys in lists is crucial to ensure React functions properly when updating list content.

Therefore, the program needs to be modified so that each list item is associated with a unique key, which cannot be the index of the item in the list. Using the index as the key would not be unique in cases where the list is modified due to item removal.

Step 3: Assigning a Unique Value for the “key” Attribute

To assign a unique value for the “key” attribute of each list item, we use a reactive variable named “key”, which will be updated using the setKey(value) method returned by useState().

An item placed in the “items” array will now be an object { name, key }, allowing us to know the unique “key” associated with each list item.

The App component is thus modified:

The Items component needs to be modified to accommodate the new structure of the “items” array.

The “key” attribute, now used in the Item component, is unique for each list item. The “index” attribute is also set to the value of the “key” key.

The Item component is also modified so that modifications or removals of an item are performed based on the value of the “key” key associated with the item (set in the “index” attribute).

Why use two attributes (“key” and “index”) to refer to the same value?

React requires, for its internal functioning, the use of the “key” attribute, which must have a unique value for each item in the list. However, this “key” attribute cannot be used directly in our programs, hence the use of another attribute named “index” here, which holds the same value. It is this “index” attribute that we can manipulate in our programs to perform the operations.

Let’s verify that these modifications produce the expected changes. We create three list items and then remove the first one. The previous bug has now been resolved (see Figure 5-15).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that two items are added. The modify and remove icons are present beside each item of the item list. It presents the arrays under the console button.

In this example, we have demonstrated the importance of assigning a unique value to the “key” attribute in list items within React. This value must be unique regardless of the existing or future items in the list.

Step 4: Obtaining Focus Directly on the Input Field

Finally, we need to ensure that the input field receives focus directly when clicking the Modify button, rather than having to click inside the field to give it focus.

To achieve this, we will use the useRef() hook, which we explained in the previous chapter. We will set the “ref” attribute in the <input> element of the JSX code in the Item component. The “ref” attribute should have the value obtained from calling the useRef() hook earlier in the component’s code.

For example, if we define const refInput = useRef(), we will use ref={refInput} in the JSX code of the <input> element. The focus() method can then be called using the statement refInput.current.focus().

When to use this instruction?

This instruction should be used when the input field appears in the Item component, that is, after clicking the Modify button. React allows performing actions after each component’s rendering or update using the useEffect() hook, which is called at that moment. Indeed, transforming a text field into an input field in a component corresponds to updating the component.

However, it’s necessary to ensure that the component’s update involves displaying the input field (the Item component can be displayed or updated without the input field being present). To achieve this, simply test within the useEffect() hook whether the value of refInput.current exists. If it exists, it means the input field is present during rendering, and we can use the focus() method on this variable. Otherwise, an error occurs when rendering the items because the input field does not exist.

Let’s use the useRef() and useEffect() hooks to give focus to the input field when it is created.

Let’s click the Modify button of the first item in the list, and the focus is directly given to the input field (Figure 5-16).

A screenshot of a page of the React app with the menu bar. It has an icon named add item. It presents that three items are added. The modify and remove icons are present beside each item of the item list. Item 1 is modified.

Conclusion

This chapter has been an exploration of creating and managing lists with React. We learned how to handle list items with unique keys and how to dynamically update a list in response to user events.

The skills acquired in this chapter are highly useful for creating various types of web applications, including enterprise dashboards, to-do list apps, or ecommerce applications. By utilizing these skills, you’re capable of creating dynamic and interactive lists, thereby enabling users to efficiently manipulate and visualize data.

We have now completed our study of React in just 5 days! You have the essential elements in this book to effectively use React, having understood its internal functioning. If this book has satisfied you, I kindly ask you to post a comment on the social media platforms you use. In addition to purchasing this book, that would be my best reward!

In the next chapter, we provide you with a summary of the JavaScript features we’ve used previously.

Using the “let” and “var” Keywords in JavaScript

In JavaScript, “let” and “var” are two keywords used for declaring variables. The main difference between the two lies in the variable’s scope.

The “var” keyword has function scope, meaning the variable is accessible inside the function in which it is declared, as well as everywhere inside that function.

For example:

In this example, the variable x is declared inside the function example(), but it is also accessible within the “if” block, because “var” has function scope. Therefore, writing “var x = 20;” does not create a new variable, as the variable x was declared earlier and is directly accessible within the “if” block. By writing “var x = 20;”, we are only modifying the value of the previously created variable.

On the other hand, the “let” keyword has block scope, which means the variable is accessible only within the block in which it is declared and in all nested blocks inside that block.

For example:

In this example, the variable “x” is declared inside the function example(). However, the second declaration of x inside the “if” block creates a new variable “x”, which is accessible only within that block. The variable x outside the “if” block retains its initial value of 10.

In summary, the main difference between “let” and “var” is the variable’s scope: “var” has function scope, and “let” has block scope. It is generally recommended to use “let” rather than “var” in JavaScript code, as it provides better control over variable scope and helps avoid accidental variable reuse across different blocks.

Using the “const” Keyword in JavaScript

In JavaScript, the “const” keyword is used to declare a variable that cannot be reassigned after its initial value has been assigned. It creates a variable with a constant, unchangeable reference to a value. This means that once a value is assigned to a “const” variable, you cannot reassign it to a different value later in the code.

Here’s an explanation of how the “const” keyword works and its key characteristics:

When declaring a variable using “const”, you must immediately assign a value to it. Unlike the “var” or “let” keywords, you cannot declare a “const” variable without initializing it.

Once a value is assigned to a “const” variable, its value cannot be changed. Attempting to reassign a “const” variable will result in an error.

Like variables declared with “let”, “const” variables are block-scoped. They are only accessible within the block (enclosed by curly braces) where they are defined.

You cannot declare another variable with the same name in the same scope if you’ve already declared it with “const”.

When using “const” with objects and arrays, the reference to the object or array itself is immutable, but the properties or elements within the object or array can still be modified.

In summary, the “const” keyword is used to declare variables that are meant to remain constant after their initial assignment. It ensures immutability of the variable reference, but the properties or elements within objects and arrays declared with “const” can still be modified. Use “const” for values that should not be changed throughout the scope of the variable.

Manipulating Objects in JavaScript

In JavaScript, structuring and destructuring objects are techniques that allow for efficient data manipulation.

Step 1: Structuring an Object

Structuring an object involves defining a data structure for that object. You can create an object with a list of properties and their corresponding values. For example, you can create a person object with properties like name, age, and city as follows:

This allows us to access the values person.name (which is “Gaby”), person.age (which is 40), and person.city (which is “Austin”).

Step 2: Object Destructuring

Object destructuring, on the other hand, allows you to extract object properties and use them independently. For instance, you can extract the name and age properties from the person object as follows:

In this example, we create two variables, name and age, that correspond to properties of the same names in the person object. We can now use these variables independently of the rest of the object. Destructuring can also be used to pass arguments to a function in a more concise way. For example, you can create a function that takes an object person as an argument and displays the person’s name and age:

In this example, we use destructuring to extract the properties name and age from the person object that is passed as an argument. We can now call this function with the person object as follows:

This will display “The name is Gaby and the age is 40” in the console.

In summary, object structuring and destructuring in JavaScript are powerful techniques that allow for efficient and concise data manipulation.

Step 3: Passing Objects as Function Parameters

In JavaScript, the notation { key1, key2 } is used in function parameters to perform object destructuring. This notation allows you to destructure a literal object by extracting the values associated with the specified properties and assigning them to variables with the same names as the properties.

Here’s an example to illustrate its usage:

In this example, the displayDetails() function takes an object as a parameter and destructures the object to extract values associated with the name and age properties. The extracted values are then used to display the person’s details.

It’s important to note that if a specified property in the destructuring notation does not exist in the object, its value will be undefined. Additionally, it’s possible to rename the extracted variables using the syntax { property: newVariable }.

In summary, the { key1, key2 } notation in function parameters allows for object destructuring, extracting values associated with specified properties. This leads to more concise and readable code, avoiding direct property access within the function body.

Step 4: Using the “...” Notation with Objects

Let’s now explain the “...” (three consecutive dots) notation with objects. The “...” notation in JavaScript, also known as the spread or rest operator, is used to spread or gather the elements of an array or an object.

When used with an object, the “...” notation creates a shallow copy of the original object, including all its properties and their values. For example:

In this example, the “...” notation is used to spread the properties of object1 into object2. This creates a shallow copy of object1, with the same properties and values.

If you write const object2 = object1;, it does not do the same thing at all! This statement creates a variable object2 that has the same memory reference as object1, thus referencing the same content as object1. If you modify the content of object1 or object2, the other object will be modified in the same way.

The “...” notation can also be used to merge multiple objects into one. For example:

In this example, the “...” notation is used to merge the properties of objects object1 and object2 into a new object object3.

It’s important to note that the “...” notation creates only a shallow copy of the original object. If the object contains properties that are themselves objects or arrays, these properties are not deeply copied and are still shared between the original object and the copy (since it’s the references to objects or arrays that are copied, thus shared between the original object and the new object).

Manipulating Arrays in JavaScript

In JavaScript, an array is a data structure that allows you to store and access multiple elements as an ordered list.

Step 1: Structuring an Array

Structuring arrays in JavaScript refers to creating, initializing, and manipulating arrays to store and organize data.

Creating an array in JavaScript can be done in several ways. The most common way is to declare an empty array and add elements using the push() method. For example:

Another common method to create an array is by using the array literal notation, which allows you to declare and initialize an array in a single step. For example:

Step 2: Array Destructuring

Array destructuring in JavaScript refers to extracting elements from an array into separate variables. This feature is useful for manipulating arrays in a more concise and readable manner. For example:

Step 3: Using the “...” Notation with Arrays

Destructuring also allows you to retrieve a portion of an array using the “...” syntax. For example:

In this example, the “...” notation is used to retrieve the remaining elements of the array after assigning the first two elements to the variables “a” and “b”. The variable “rest” will contain the elements 3, 4, and 5 as an array, that is, [3, 4, 5].

Using Import and Export of Modules in JavaScript

In JavaScript, modules are code files that can contain functions, variables, and classes, which can be imported and used in other code files. Modules allow for structuring and organizing JavaScript code, making it more modular and easier to maintain.

There are several ways to define and import modules in JavaScript, but the most common method is using the import and export syntax. Modules can be exported using the export and export default keywords, and they can be imported using the import keyword.

Here’s a simple example to illustrate the creation and usage of modules in JavaScript (file myModule.js):

We export the variable myVariable, the function myFunction(), and the JavaScript class MyClass in the module myModule.js.

In another JavaScript file (e.g., test.js), we import these previously exported elements:

You can also write the “import” statement on a single line as follows:

This way, we have access to the exported elements from the myModule.js file in the test.js file.

Step 1: Using Modules in HTML Files

To use JavaScript modules in an HTML file, we use the <script> tag with the “type” attribute set to “module”.

Here’s an example of HTML code that imports a module named myModule.js:

The message “This is my function” is displayed in the browser console, demonstrating that the myFunction() is successfully accessible in the JavaScript code of the HTML file.

Step 2: Using the “import” Statement

The “import” statement is used in JavaScript to import modules from one JavaScript file to another. The basic syntax for importing a module is as follows:

This syntax allows you to import specific variables or functions from a module. The path to the module should be relative to the current JavaScript file.

Here are some examples of using the “import” statement in JavaScript:

In these examples, the “import” statement is used to import specific variables and functions from a module. In the last example, all exported variables and functions are imported using the * operator, and an alias myModule is created to access the exported elements.

It’s important to note that the “import” statement can only be used in a module context. A JavaScript file must be explicitly marked as a module by using the “type=module” directive in the <script> tag of the calling HTML file.

Step 3: Using the “export” Statement

The “export” statement in JavaScript is used to export variables, functions, classes, or other elements from one JavaScript file to another. The exported elements can be used in other files by importing the module that contains them.

There are two main ways to export elements in JavaScript: using the “export” syntax or “export default” syntax.

The “export” syntax is used to export named elements. For example, to export a named variable myVariable and a named function myFunction from a file myModule.js, you can use the following syntax:

The exported elements can then be imported into another file using the “import” statement. Here’s an example:

Step 4: Using the “export default” Statement

The “export default” syntax is used to export a default element from a module. For example, to export a default class from a file myModule.js, you can use the following syntax:

In this example, the MyClass class is exported as the default. It can be imported into another file using the following syntax:

In summary, the export statement in JavaScript allows you to export elements from a module to make them available in other JavaScript files. It can be used to export variables, functions, classes, or other elements and can be combined with the import statement to create modular and reusable JavaScript applications.

Step 5: Difference Between “export” and “export default” Statements

The decision to use “export” or “export default” in JavaScript depends on how you want to expose module elements and import them later.

The export syntax is used to export multiple named elements from a module. This means that when a module is imported, the exported elements must be imported with their original names and enclosed in curly braces.

For example:

In this example, the exported elements must be imported using their original names and enclosed in curly braces. If we try to import an element with a different name than the one specified in the export, an error will be generated.

The export default syntax is used to export a default element from a module. This means that the element exported as default can be imported later using a name of our choice. Only one element can be exported as default in a module, to avoid confusion.

JavaScript will understand that we want to import the default exported element in a module because we import it without using the curly braces notation, unlike elements exported using the “export” statement, which are imported with the curly braces notation.

For example:

In this example, the default exported element (the MyClass class) can be imported using a name of our choice (MyCustomName in this case). This can be useful if we want to give a more meaningful name to the imported element or avoid naming conflicts.

In summary, “export” is used to export multiple named elements from a module, while “export default” is used to export an element that will be considered the default one during import. The decision to use one or the other depends on how we want to expose module elements and how we want to import them into other files.

Using Arrow Functions in JavaScript

Apart from the concise writing aspect of arrow functions, the deciding factor to use them in JavaScript code is mostly the desired value for the “this” variable.

Let’s now look at the syntax of these functions and then explain the value of “this” in each use case.

Step 1: Using Arrow Function Syntax

Let’s start by examining the writing syntax of these functions. Here’s an example:

In this example, the first function is a traditional function that calculates the square of a number. The second function is the arrow version of the same function, which uses a more concise syntax. Both functions have the same functionality, but the arrow version is more concise and easier to read.

Note that the arrow function syntax includes parentheses around the parameters (in this case, x), followed by the arrow =>, and then the function body (in this case, x * x). The arrow version doesn’t require the return keyword here because it automatically returns the calculated value.

Here’s an example of an arrow function in JavaScript that uses the return statement:

In this example, the first function is a traditional function that finds the largest number in an array. The second function is the arrow version of the same function, which uses a more concise syntax. Both functions have the same functionality, and the arrow version also uses the return statement to return the calculated value.

Note that the arrow function syntax still includes parentheses around the parameters and the => arrow, but this time there are also curly braces to delimit the function body. The return statement is used to return the calculated value.

Step 2: Understanding the Value of “this” in Arrow Functions

The value of “this” in an arrow function is determined by the lexical context in which the function is defined, unlike traditional functions where “this” is determined by how the function is called.

In an arrow function, “this” refers to the value of “this” in the parent scope. This means that if the arrow function is defined within an object, for example, “this” in the arrow function refers to the parent object, not the object that calls the function.

Here’s an example to illustrate this concept:

In this example, the object “obj” contains two functions: sayHello() and sayHelloArrow(). sayHello() is a regular function that uses “this” to access the “name” property of the object, while sayHelloArrow() is an arrow function that also uses “this” to access the “name” property.

When the sayHello() function is called, “this” refers to the “obj” object, allowing access to the “name” property and displaying it in the console. However, when the sayHelloArrow() function is called, “this” refers to the lexical context in which the function was defined, which is the global context in this case. Therefore, this.name is undefined in the arrow function, and undefined is displayed in the console.

Depending on the value of “this” that we want to access, we will use either a regular function or an arrow function.

Using the map( ) and filter( ) Methods of the JavaScript Array Class

The map(callback) and filter(callback) methods are two commonly used high-level functions in JavaScript for manipulating arrays (or collections of objects). They are often used with React. Here’s an explanation of each method.

Step 1: Using the map( ) Method

The map(callback) method creates a new array by applying a given function, here named callback(), to each element of the original array. The map() method takes a callback() function as a parameter.

The map() method then returns a new array with the results of applying the callback() function to each original element. The resulting array will have the same length as the original array.

Here’s a simple example for better understanding:

Here, we created an array with numbers, and then we used the map() method to create a new array with the same numbers, but multiplied by 2.

The map() method returns a new array constructed from the elements of the original array. The resulting array will have the same number of elements as the original array.

To reduce the number of elements in the resulting array, we will use the filter() method, which allows us to select the elements to be included in the resulting array (but without modifying them). Let’s now look at the filter() method.

Step 2: Using the filter( ) Method

The filter(callback) method also creates a new array, but it filters the elements of the original array that satisfy a specified condition. This method also takes a callback() function as an argument, which will be applied to each element of the original array. This callback() function must return a boolean value: true if the element should be retained in the resulting array returned by the filter() method, false otherwise.

The filter() method then returns a new array with all the elements of the original array that satisfy the specified condition.

Here’s a simple example to better understand:

Here, we’ve created an array with numbers, and then we used the filter() method to create a new array with only the even numbers.

Step 3: Using the map( ) and filter( ) Methods in React

The map() and filter() methods are widely used in React to manipulate data arrays and generate user interface elements.

In summary, the map() and filter() methods are useful in React for dynamically generating user interface elements from data lists, filtering data based on certain conditions, manipulating data to create new data, and improving performance.

Using Promise Objects in JavaScript

Promise objects in JavaScript are used for handling asynchronous tasks, which are tasks that don’t complete immediately. A Promise object represents a value that may not be available immediately but will be resolved (i.e., become available) at some point in the future.

Step 1: Promise Object Definition

Promise objects are often created as return values from functions because they provide a clearer and more structured way of handling asynchronous tasks.

When an asynchronous task is executed, it doesn’t immediately return a result, as it needs to perform an operation that may take time (such as an HTTP request or file reading). While waiting for this operation to complete, the code that follows continues to execute, potentially causing synchronization and blocking issues.

Promise objects are used to address this issue. They provide a clear and structured way to handle asynchronous tasks by returning an object that represents the promise of a future result. This object can be used to attach callback functions that will be called once the asynchronous task is completed, and the result is available.

For example, a function that performs an HTTP request can return a Promise object representing the promise of the request’s result. Callbacks can then be attached to this Promise object using the then() and catch() methods to handle successful results or errors that may occur during the execution of the asynchronous task.

In summary, the Promise object is created as a return value from a function to handle asynchronous tasks in a structured manner by returning an object representing the promise of a future result and attaching callbacks to handle results or errors.

By using Promise objects, it’s possible to perform asynchronous tasks in JavaScript more efficiently and in a way that’s easier to read and maintain.

To understand the use of Promise objects, let’s take an example where we don’t use them and then the same example where we do.

Step 2: Without Using Promise Objects

Here’s an example without using Promise objects:

Let’s say we want to load images from a server and display them in our application. Without Promise objects, we would have to use callbacks to handle the asynchrony:

This example uses the Image object to load an image from the server. The loadImage() function takes the image URL and a callback function as arguments. This callback will be invoked once the image has been loaded. After the image is loaded, further processing can take place within the callback function, allowing for handling of the asynchrony. The callback function has two arguments: a possible error and the loaded img (image) itself.

Step 3: Using Promise Objects

Now, here’s the same example using Promise objects:

Here, the loadImage() function returns a Promise object that is resolved with the image if the image loading succeeds, or is rejected with an error message if it fails. By using the then() method, we can handle the image once it has been loaded, and with the catch() method, we can handle errors that occur.

The use of Promise objects in this example makes the code more readable and easier to understand and provides simplified error handling.

Using “async” and “await” Statements in JavaScript

The “async” and “await” statements are features of JavaScript that make working with Promise objects even more readable and understandable for handling asynchronous tasks.

By using “async” and “await” statements, code can be written synchronously (i.e., with sequentially following instructions) while still effectively managing asynchronous tasks. The “async” statement is used to mark a function as asynchronous, allowing the use of the “await” statement within that function.

The “await” statement is used to wait for the resolution of a Promise object before continuing the code execution. This avoids the use of callbacks and results in code that is easier to read and understand.

For example, here’s a usage example of Promise objects to make an HTTP request. We will then see how to write the same code using “async” and “await” statements.

The fetch() and json() methods in JavaScript each return a Promise object, enabling the use of the then() and catch() methods on these methods.

Now, here’s how we can rewrite this code using “async” and “await” statements:

Here, the getData() function is marked as “async”, which allows (within the getData() function) the use of the “await” statement to wait for the resolution of Promise objects returned by the fetch() function and the json() method. The use of “async” and “await” statements enables writing code that is more readable and easier to understand while efficiently managing asynchronous tasks.

In summary, the use of “async” and “await” statements provides an easier and more readable way to utilize Promise objects for handling asynchronous tasks. This helps avoid the use of callbacks and reduces code complexity.

Creating an Asynchronous Function That Utilizes JavaScript’s “await” Statement

Let’s examine these two cases now.

Step 1: Using “await” with a Function That Returns a Promise Object

For “await” to be used with a function, the function can return a Promise object or be declared with the “async” keyword.

Here’s an example of a function that returns a Promise object:

The wait(ms) function takes a number of milliseconds as input and returns a Promise object that will resolve after the specified number of milliseconds. The function utilizes the setTimeout() function to trigger the resolution of the Promise object after a specified delay.

To use the wait(ms) function with the “await” statement, you simply need to call it within a function marked with “async”, like this:

This myFunction() function uses the “await” statement to wait for the resolution of the Promise object returned by the wait() function. The function prints “Start” to the console, waits for two seconds using “await wait(2000)”, and then prints “End” to the console.

In cases where the wait(ms) function wants to return a value, you can simply provide that value (“value”) as a parameter in the resolve(value) function call.

The wait(ms) function becomes as follows:

We can no longer simply indicate setTimeout(resolve, ms) as before, because now we need to explicitly call the resolve() function and pass the return value as a parameter. Hence, the new syntax is written as setTimeout(() => resolve(value), ms).

We use the value returned by the wait(ms) function as follows:

Step 2: Using “await” with a Function Declared with “async”

This is the second way to use the “await” statement when calling a function. The function must have been declared using the “async” keyword during its definition.

A function declared with the “async” keyword is considered to return a Promise object. Therefore, it can be used when called with the then() and catch() methods or used with the “await” keyword.

Since the myFunction() is declared with “async”, it can be used within a new function called myMainFunction() using the “await” keyword. The result returned by myFunction() will be used as the return value in myMainFunction(), asynchronously (after waiting for two seconds).

The same process can be written using promises and the then() / catch() methods:

The then(res) method used on the promise myFunction() allows retrieving the result of the promise, which is the string “myFunction() : Waiting for 2000ms”, in the parameter res.

Conclusion of the Book

Master React in 5 Days is a comprehensive guide that enables the reader to learn the fundamentals of the JavaScript library React in just five days. The book covered key concepts of component creation, JSX usage, event handling, hooks utilization, and much more.

The reader has gained a strong understanding of React and can now use it to build modern web applications. The skills acquired from the book enable the reader to work on real projects and create interactive user interfaces, forms and controls, dashboards, ecommerce applications, and much more.

Furthermore, the reader can use the skills acquired from the book to continue learning and exploring React. Online resources are plentiful, and there are numerous complementary tools and libraries that can be utilized to enhance React skills.

In summary, Master React in 5 Days has been an enriching educational experience for you, I hope! The book has provided a solid understanding of the React library and has enabled the reader to develop practical web development skills. The skills gained from the book serve as a strong foundation for becoming a competent and efficient React developer and for continuing to explore the many possibilities that React offers in the future.