Week 2: React Hooks and Custom Hooks

What are React hooks?

React hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and have quickly become one of the most popular features of the library.

Why use React hooks?

There are a number of reasons why you might want to use React hooks:

• Simplicity: Hooks allow you to write simpler and more concise code.
• Flexibility: Hooks can be used with both functional and class components.
• Reusability: Hooks are easy to reuse across different components.
• Performance: Hooks can improve the performance of your React applications.

Getting started with React hooks

To start using React hooks, you need to import the useState hook from the react library. This hook allows you to create and manage state in a functional component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In the example above, we are using the useState hook to create a state variable called count. We then use the setCount function to update the state variable when the button is clicked.

Other React hooks

In addition to the useState hook, there are a number of other React hooks that you can use. Some of the most popular hooks include:

• useEffect: This hook allows you to perform side effects in a functional component, such as fetching data or setting up subscriptions.
• useContext: This hook allows you to access context data from a functional component.
• useReducer: This hook allows you to manage complex state in a functional component.
• useCallback: This hook allows you to memoize callback functions, which can improve the performance of your application.
• useMemo: This hook allows you to memoize the result of a function, which can also improve the performance of your application.

Learning more about React hooks

There are a number of resources available to help you learn more about React hooks. The official React documentation is a good place to start. You can also find many helpful tutorials and articles online.

Conclusion

React hooks are a powerful tool that can help you write better React code. If you are a React developer, I encourage you to learn more about hooks and start using them in your projects.

Meta lite studios for
productions and virtual reality in New York City
and take action. My name is Murtadha.
I’m a software engineer at Meta based on
the Seattle office. React hooks were
first introduced at a React conference and
it was shared with the community and
the community of React enthusiast who are
excited about the new things and they’re the people
that we trust to give us the feedback and test out the things that
we’re thinking about. I had gone on vacation
and came back and my co-worker had been saying, there’s this new exciting thing, let’s start using it, and I looked at it and I
thought, this is so silly. Why do we need this
thing and he’s like, no trust me, this is
going to be great, so I was like, okay fine. I started learning them
and start using them. Now I can’t imagine writing
code without hooks. At first, it sometimes feels
a little unintuitive or there’s a lot of magic going on that doesn’t make
sense right away. But once you get the hang of it and you start using it and understanding it actually really makes life easier to use. Hooks can actually simplify your applications
greatly and introduce performance gains that can make your code more readable
and easier to manage, as well as your code more
shareable and reusable. Before the
introduction of hooks, we were using class components, and they seemed like they
were doing their job. But with time, this class components
were becoming bigger. They were becoming
quite complex. We couldn’t really break
certain components down into more modular
components or pieces. We wanted to make
code more usable. We wanted to make it simpler and remove this need for having these huge bloated
components that we’re not able to be broken
into smaller pieces. When we develop new
technologies at Meta, we tried to be the
first users of those things to make sure
they actually work and we get to be watching the feedback as it comes
directly from our engineers, so the same thing with hooks. We started actually using
them internally a lot. We saw that internal teams are also starting to
really appreciate the improvements that
hook introduced and so that really
justified that hooks are making a big difference
in the process of developing React applications and it gave rise to rolling it
out more widely. When hooks were introduced, they were actually introduced in a non-breaking wave which meant that you don’t have to use them. You could continue to use
the old style of writing React components and
they didn’t break anything that was
previously written. This is one of the
approaches that we use when we roll out new things that we want to make sure
this new thing doesn’t break any of the old
things that people are doing.. My advice for
you as you’re learning hooks and working with them for the first time is
to stick it out. They may seem hard and
confusing at first, but they actually will improve your code with time
and it may be tempting to use the old way of writing React code but
actually with hooks, you will find that
once you learn them, code will make more
sense with hooks. Even if at first seemed a
little confusing and intuitive. Take the time to learn them, make that investment upfront and you’ll find that it’s
worth it in the long run.

Revising useState hook in React

The useState hook is a React hook that allows you to manage state in your components. It is one of the most fundamental hooks in React, and it is used in almost every React component.

The useState hook takes a single argument, which is the initial value of the state variable. It returns an array with two values: the current value of the state variable and a function to update the state variable.

To use the useState hook, you first need to import it from the React library:

import React, { useState } from "react";

Then, you can use the useState hook in your component like this:

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

In this example, we are using the useState hook to create a state variable called count. The initial value of count is 0. We are also creating a function called setCount. This function will be used to update the value of the count state variable.

When the user clicks the button, the setCount function will be called and the value of count will be incremented by 1. This will cause the count state variable to be updated, and the count element in the UI will be updated accordingly.

The useState hook is a powerful tool for managing state in React components. It is easy to use and it provides a simple way to update state in response to user events.

Here are some additional tips for using the useState hook:

• Use descriptive names for your state variables. This will make your code more readable and maintainable.
• Avoid using nested state variables. This can make your code more difficult to understand and debug.
• Use the useState hook to manage immutable state. This will help to prevent bugs and make your code more predictable.
• Use the useEffect hook to perform side effects after the state of your component has changed.

Overall, the useState hook is a powerful and versatile tool for managing state in React components. By following the tips above, you can use the useState hook to write efficient and maintainable React code.

Which of the following is true about the useState hook?

Select all that apply. 

The useState hook’s return value in React is the array data structure.

That’s correct. The invocation of the useState hook returns an array.

The useState hook allows you to work with state in components. 

That’s correct. The useState hook is used to work with state in a React component.

The useState hook invocation returns a two-member array. 

That’s correct. When calling the useState() hook, the returned array holds the state variable’s value asthe first item of that array and the function that will be used to update the stateas the second item of that returned array.

When using the useState hook, you must use the state-updating function to update state.

 That’s correct. There is only one correct way to update state when using useState and that’s through the state-updating function.

Imagine that Little Lemon needs a way to
track the restaurant’s food inventory in this video. You’ll work through some practical
examples using an app built for Little Lemon to revise
the used state hook and explore how the useState hook is invoked,
you’ll examine the return values of the useState hook and
how it’s used to update state. You are probably already familiar with
a used state hook which is used to work with state in a react component
with state being all the data and app is working with at a given time. But before moving on to use state, let’s
revisit the concept of a radi structuring, recall that a raid is structuring is
a way to get individual items from an array of items and save those
individual items as separate components. Now let’s explore this concept
with a practical example. Say you’re coding an app that tracks
current food reserves in Little Lemons pantry, you’re using a variable to
keep all the veggies in an array. As you continue to code, you realize you need to get each item from
the array into its own separate variable. For the first item in the array, you want to name the variable V1
as in veggie one, the second item. V2 and so on. With a radi structuring, you can do this
easily using a single line of code for more information on a radi structuring, you can refer to the additional
resources at the end of this lesson. Note that with a radi structuring,
you’re free to give any variable name to the items that you
D structure from an array. However, when the structuring objects,
you have to d structure a property of an object using that exact properties name
as the name of the d structured variable. This makes objects a lot stricter in
terms of what you can name your D structure variables. For that reason,
react uses the array data structure for the used state hooks return value. Now that you’ve had a sneak preview of
the return value of the useState hook. Let’s explore how it actually works. I will demonstrate how to update state and
react apps by using the use state hook to set the initial value of
the restaurant name to Lemon and then using only the use state updating
function to update it to little Lemon. The use state hook allows you to
work with state in components. Let’s start discussing state by
revising what happens when I called the youth state hook. I’m only returning null from here because
I want to focus on the console for now inspecting the console. This is what gets logged. The console logged value is an array with
the state variables value being the first item in the array. The second item in the returned
array is the function that will be used to update the state. So the use state hook invocation
returns a two member array. The convention is to name the state
updating function using camel case. Another convention is to name
it by pre pending the words set to the variable name used for
the D structured state variable. In other words, the correct way to work
with state means that by starting code example should be improved to correctly D. Structure the array returned from
the call to the useState hook. Now the D structured restaurant
name variable holds the state and the D structured set. Restaurant name variable holds
the state updating function. This is an example of a radi
structuring using the used state hook. You may be wondering how you can update
state Well when first starting to use the use state hook. Some developers try to update the state
variable in a variety of ways, but there is only one correct way to
update state when using use state and that’s through the state
updating function. In other words, the only way to update
the state of the restaurant name variable is by invoking the set restaurant name
function in a react app state changes are usually triggered through the act
of a user interacting with the app. This means that state changes are usually
triggered by user generated events. These events such as mouse movements,
button clicks and key presses happen all the time. In an app, the role of the developers to
respond to specific kinds of events in a way that’s meaningful to the app. That’s being coded. One common way users interact with
web apps is through button clicks. So let’s examine an example of changing
state in response to these user generated events, namely button clicks. In this example code I’m adding a button
which when clicked will execute a function. This function is update restaurant
name which is invoked wherever I user clicks on the button. Now when I click the update restaurant
name button that will change the H. One heading from Lemon to Little Lemon. Because the invocation of the update
restaurant named function triggered a call to the set restaurant name
state setting function. You should now be able to
recall what they used. State hook is used for and
how it works in practice. I hope that working with the useState
hook will be a fuss free task for you going forward especially when working
with primitive data types to track state in a component.

Tutorial on using the useState hook in React

The useState hook is a React hook that allows you to manage state in your components. State is data that can change over time, and it is essential for building dynamic and interactive UIs.

To use the useState hook, you first need to declare a state variable. This can be done by calling the useState function and passing in the initial value of the state variable. For example:

const [count, setCount] = useState(0);

This declares a state variable called count with an initial value of 0. The setCount function is a callback function that is used to update the value of the count state variable.

To update the state variable, you simply call the setCount function with the new value of the state variable. For example:

setCount(count + 1);

This will increment the value of the count state variable by 1.

You can then use the state variable in your component to render dynamic UI. For example:

return (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);

This will render a button that increments the count when clicked.

The useState hook is a powerful tool for managing state in React components. It is easy to use and provides a simple way to update state and render dynamic UI.

Here are some additional tips for using the useState hook:

• Use descriptive names for your state variables. This will make your code more readable and maintainable.
• Avoid mutating state directly. Instead, use the setCount function to update state. This will help to keep your code immutable and easier to reason about.
• Use the useState hook to manage all of the state in your component. This will help to keep your code organized and maintainable.

By following these tips, you can use the useState hook to write efficient and effective React code.

You can use an object with multiple properties as the initial value of the state variable.

True

That’s correct! You can use an object with multiple properties as the initial value of the state variable, just like the formData state variable in the example, where the useState hook was invoked with the object containing two properties (the goal property and the by property).

Imagine it’s the very early
days of Little Lemon, with the restaurant
only existing on paper. The owner would like an app
to track the development of the restaurant business and the achievement of
all related goals. Let’s explore how to build a goals app with the
described requirements in react using the use state hook in a component and
updating the state. The completed app, is now displayed on screen. When this code is compiled, I get a heading that reads my. Little Lemon goals
and then I have a simple form with two
inputs, goal and by. The first input field
is there to let the owner type out
their goal and the second input field is
there to let them type out the timeframe within which they want to achieve a given goal. The code itself consists of
three separate components. Goal form, which captures
a new goal using a forum, list of goals, which loops over all the previously added
goals and displays them as an unordered list of list
items and the app component, which puts those two components together and allows
me to render them, as well as pass the
functions that they’ll be working with through
their props. Let’s explore these. The first component, namely the goal form component, accepts the prompts objects. In the body of the
goal form function, I start by declaring a state
variable of forum data, which is D structured from a
call to the use State hook. I initialize this form data variable as an object
with two properties, goal and by, both assigned the values
of empty strings. Next, I declare two functions, change handler and
submit handler. First is the change
handler function which accepts an E parameter. This E parameter is a readily
available event object. In other words, I don’t have to pass this object from
my change handler. It’s provided to me by a
mechanism outside of React. Even in plain JavaScript, whenever an event is fired, this creates an
event object with many different pieces of
data related to the event. I can then use this
event object by simply assigning it a
custom name such as E, EVT, or Even event. I’m using the letter E here
to keep my code concise. In the body of the
change handler function, I update the state of my form data variable
by invoking the previously D structured
state-setting variable of a set form data, which was D structured from a
call to the use State hook. The set form data
function accepts a shallow clone of the previous value of
the form data variable. That’s the form
data variable with the spread operator
before it here. Remember that you
should not work with the form data variable
directly which is why, I’m making a copy. This is because of how React
optimizes its virtual DOM. Keeping state immutable makes it possible to compare a
previous version of the virtual DOM with the updated version more efficiently and
cost effectively. Next, I update this new copy of the form data object
by adding this code, it reads the E target name
using the bracket notation. Then sets the value of this property to
whatever is inside that E.target.value property
of the instance of the event object, which was built when that
specific event was fired. The reason why this works with the brackets notation is that it allows me to set the value of the E target
named dynamically. In other words, it allows
me to set it as goal, If the user typed into
the input with the name attributes set to Goal
or to set it as By, If the user typed into the input with the name
attributes set to By. Second, I declare a
submit handler function which also accepts
the event attribute. The goal form component
receives the prop named on Add, and I’m giving the function add goal to it as the props value. But it’s not just any function. It’s actually a function
that’s declared right here on line 43 inside the
app component itself. This add goal function accepts a goal entry and
updates the value of add goals state variable that’s kept inside
the app function. It does this by adding this goal entry to the
list of previous goals saved and tracked inside the all goal state variable
of the app component. The update of any state
variable must go through the previously D structured
state updating function. In the case of the
app component, the state updating function is the update all goals function. That’s why I’m invoking the state updating function
inside the add goal function. To make it all work, I also need to pass the add
goal function definition to the goal forum JSX element in the app component’s
return statement. That’s why the add
goal function is now available as a prop
named on Add inside the goal form function
and that’s why I can now use it inside the
submit handler function, starting up here on Line 10. I’m back in the goal form
function declaration. Once the props dot on Add function is invoked
here on Line 12, it receives the
form data variable, which triggers the update
of the all goals state variable in the app component
as described previously. I still have the form showing the values that
the user entered. To deal with this,
I need to reset the form data state variable
to an empty string, both on the goal property of the form data state object and the buy property of the
form data state object. This now brings me to the return statement of
the goal form function. I want you to focus on the
form element that has the on submit event handling attribute set to the submit
handler function. The first and second
inputs both follow the same structure of
having the type, name, placeholder, value, and
on change attributes, which hawk into the previously
described functionality. Moving on to the list
of goals component, this component receives
the all goal state variable as a prop from
its parent app component. The purpose of this is to map over the all goals
array of objects where each object holds
the two properties that describe a single
goal as explained earlier. By mapping over the all
goals array of objects, I now output this
unordered list with a list item entry for
each individual goal. Having now worked through
coding a goals app in React, you should have
greater insight into using the use State hook
within a component, including how to declare, read, and update state.

Side effects in React

A side effect is something that happens outside of a function. This can include things like:

• Changing state outside of the function
• Making external calls, such as to an API or database
• Logging to the console
• Changing the DOM

Side effects can make your code more difficult to reason about and test. They can also make it more difficult to optimize your code for performance.

In React, it is generally best to avoid side effects in your functional components. This is because functional components are supposed to be pure functions. A pure function is a function that always returns the same output for the same input.

If you need to perform a side effect in your React component, you should use the useEffect hook. The useEffect hook allows you to perform side effects after the component mounts and when any of the dependencies change.

Here is an example of a function that uses the useEffect hook to perform a side effect:

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This function will be executed after the component mounts and whenever the count state changes.
    fetch('/api/users')
      .then(response => response.json())
      .then(users => {
        setCount(users.length);
      });
  }, [count]);

  return (
    <div>
      <h1>The count is: {count}</h1>
    </div>
  );
}

The useEffect hook takes two parameters:

• A callback function: This function will be executed after the component mounts and whenever any of the dependencies change.
• An array of dependencies: This array contains the values that the callback function depends on. If any of these values change, the callback function will be executed again.

In this example, the callback function makes an API call to get a list of users. The callback function depends on the count state. If the count state changes, the callback function will be executed again to fetch the latest list of users.

It is important to note that the useEffect hook should be used sparingly. If you find yourself using the useEffect hook in many places in your component, it is a sign that your component is probably too complex. You should try to break down your component into smaller, simpler components that can be more easily tested and optimized.

True or False:

A pure function will perform a side effect.

False

That’s correct. While a pure function has no side effects, an impure function will perform a side effect.

Before moving on to using another hook. Known as the use Effect hook,
let’s take some time to consider its name. The name of the use Effect hook is closely
related to the concept of an effect or more precisely a side effect. In this video you will learn what side
effects within a react component are, including what pure and
impure functions are. And their relation to side effects as well
as how use Effect is used to perform side effects within functional components. So what is a side effect? A side effect is something
that makes a function in pure. Did you know that functions
can be classified as pure and impure simply put pure functions
don’t have side effects. And impure functions do let’s
unpack the concept of pure and impure functions in relation
to side effects and more. A pure function should
receive specific input. That is a specific parameter will
always return the exact same output. No matter how many times it gets invoked. To illustrate let’s explore a function
that uses the year little lemon was established. In this example the established year
component accepts a props object that is a props parameter. It also returns a value that is
a heading that outputs the words established year followed
by a colon space. And the value of the year prop as long
as the value of the year prop is 2003. Regardless of how many times the
established year function is invoked or it is rendered from the app component,
the output will remain unchanged. This is an example of a pure function. The established year function
has no side effects. By contrast and impure function
will perform a side effect. That means it will do things such as
invoke console log, invoke, fetch or invoke browsers geolocation functionality. In this context, a side effect can be
thought of as something external to or outside of a function. Consider the example of a ShoppingCart
function built for the little lemon app. It is an impure function because of
the line that reads console log total. The console log call makes the function
impure as it’s a call to a browser, application programming interface or API. The ShoppingCart function now depends
on something outside of itself and even outside of the react
app to work properly. So how should you deal with the issue
of impure functions in react. Well, it’s all about containing the impure
actions inside their own special areas. To do this and
react you need to use the use Effect hook, let’s update the ShoppingCart component
with the use Effect hook to properly deal with the side effect
caused by the console log. First, you need to import
the use Effect hook from react the use Effect hook works by
accepting two parameters. The first is a callback function. The second parameter is an array. This array can be kept empty which is
perfectly valid while the syntax is valid. It’s common to use an arrow function as
the first argument of the invocation of the use Effect hook. Note that the use Effect has been
simplified to a single line of code. It usually spends several lines of code
that’s because it typically needs to do something more meaningful than
just console logging the value of the components variable. In this video, you learned about pure and
impure functions and their relation to side effects. Exploring with side effects
within a react component are, and briefly how use Effect
is used to perform them. You can look forward to applying this
knowledge by using the use Effect hook introduced in this video
to perform side effects.

Tutorial: Using the useEffect Hook in React

The useEffect hook is a React hook that allows you to perform side effects in your components. Side effects are actions that can affect the state of the component outside of React, such as updating the DOM, making HTTP requests, or setting timers.

The useEffect hook is typically used to perform the following tasks:

• Update the DOM
• Make HTTP requests
• Set timers
• Listen for events
• Clean up resources

To use the useEffect hook, you pass it a function that contains the side effect code. This function will be executed after the component has rendered.

You can also pass a second argument to the useEffect hook, which is a dependency array. The dependency array is a list of variables that the useEffect hook will watch for changes. If any of the variables in the dependency array change, the useEffect function will be re-executed.

Example:

The following code shows a simple example of how to use the useEffect hook to update the DOM:

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

In this example, the useEffect hook will be executed every time the value of the count variable changes. This will cause the title of the browser tab to be updated accordingly.

Empty dependency array:

If you pass an empty dependency array to the useEffect hook, it will only be executed once, after the component has mounted.

This can be useful for performing side effects that only need to be done once, such as setting up an event listener or initializing a timer.

Cleaning up resources:

The useEffect hook can also be used to clean up resources when a component unmounts. To do this, you can return a function from the useEffect hook that will be executed when the component unmounts.

This can be useful for cleaning up resources such as event listeners, timers, and open connections.

Example:

The following code shows how to use the useEffect hook to clean up an event listener:

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleClick = () => {
      setCount(count + 1);
    };
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
}

export default App;

In this example, the handleClick function is added as an event listener to the document object. When the component unmounts, the useEffect hook will return a function that removes the event listener.

This ensures that the event listener is always cleaned up, even if the component unmounts prematurely.

Conclusion:

The useEffect hook is a powerful tool for performing side effects in React. By understanding how to use the useEffect hook, you can write more efficient and performant React applications.

How should you add a side effect functionality In React? 

Using the useEffect hook

That’s correct. The correct way to add a side effect functionality is to use the useEffect function.

To demonstrate how to use the useEffect hook
within a component, let’s continue working
on the Little Lemon app. Say the owner of the
restaurant wants to add a specific way for the user
to interact with the app. On a button click, the owner wants a welcome
message displayed, and on another button click, the owner wants the
message hidden. Additionally, the owner
wants this change to be reflected on the Browser tab
where the app is served. Updating a Browser tab is an
example of a side effect. In this video, I will demonstrate
how to do this by using the useEffect hook to perform
side effects in React, as well as how to control when the useEffect function is run using the
dependencies array. I’m going to use an app
I built previously using Create React App to demonstrate how to use
the useEffect hook. To describe what’s happening, let’s start with a
return statement. I have a wrapping div
and inside of it, an h1, a button in a JSX
expression that uses the logical and operator to
conditionally render an h2. The button has an onClick
event handling attribute and it triggers the
clickHandler function, which I’ve declared as a function expression
starting on line 7. On line 5, I’ve destructured the
toggle variable from a call to the useState
hook to track the state of the toggle
variable and make the conditional rendering in the return statement possible. Now, let’s inspect my app in the browser as it’s
currently being served. Everything is working well. When I click the
button, the sentence, welcome to Little Lemon
appears under it if it wasn’t shown previously,
and vice versa. Although the app
is working well, my app currently has no way of updating the text
in the Browser tab, like the restaurant
owner wants it to do. This is an example
of a side effect, which is why the
correct way to add this functionality is to
use the useEffect hook. Above the return statement, I’ll add a call to the useEffect function as
follows, React.useEffect. I need to pass a function
to the useEffect call. I’ll add an arrow function
without parameters, and in the body of
the arrow function, I’ll add this ternary here, which checks if the value of the toggle variable
is true or false. If it’s true, it should
return the string that reads, welcome to Little Lemon. Otherwise, it should
return the string that reads using the useEffect hook. Whatever gets returned
is the value I’m assigning to the title property
of the document object. This property thus
dynamically updates the text showing them the tab of the browser where this
React app is served. Let’s inspect the updated
app in the browser. I can confirm that with
every click of the button, the title on the
tab is updating to one of the two
specified strings. Imagine that the owner has
changed his mind and he wants the title on the document to be set on the initial
component render. After that, it doesn’t
want it updated. This is where the
dependency array comes in. The dependency array determines when the useEffect
hook will be invoked. For now, I’ll update my code with an empty
dependency array, meaning I’m not tracking the state of any
state variables. In other words, regardless of what is happening in my app, I don’t want the useEffect
hook to be invoked. This means that it’ll
be invoked only once. After that, no matter
what happens in my app, the useEffect hook
will no longer be run. Now that I’ve updated my app, let’s save the changes
and examine how this affects the behavior of
my app in the browser. The useEffect hook
runs only once, outputs the words using
the useEffect hook. After that, regardless of how many times I click on
the Toggle message button, there are no further
updates to the tab title. The dependency array is there to watch for changes to
a specific variable. Based on that, execute the
function that’s passed in as the first argument of
the useEffect function call. This means that if I want
to run the useEffect hook whenever there’s an update to the value stored in
the toggle variable, I need to add the
toggle variable to the dependencies array. After this change, back in the browser, the useEffect hook
will be run every time the Toggle message
button is clicked. Because the clickHandler
updates the value of the toggle state variable by invoking the setToggle function. This in turn, triggers
the useEffect invocation. Since the dependencies
array is set to watch for changes to the
toggle variables value. There you go. I have a
way to fulfill any of the restaurant owners
requests that might involve some side effects
in my React apps. You should now have
a better idea of how to use the useEffect
function to handle side effects and of how to use the dependency array to determine when it
will be invoked.

What are the rules of hooks in React?

Hooks are a new feature in React that allow you to use state and other React features without writing classes. However, there are a few rules that you need to follow when using hooks.

Rule 1: Only call hooks from React component functions.

You cannot call hooks from regular JavaScript functions. Instead, you can only call hooks from React component functions. This is because hooks need to be able to track the state of your components and cause re-renders when necessary.

Rule 2: Only call hooks at the top level of a React component function.

You cannot call hooks inside loops, conditions, or nested functions. This is because hooks need to be called in the same order each time the component renders. If you call hooks inside loops, conditions, or nested functions, the order in which they are called could change, which could lead to errors.

Rule 3: You can call multiple state hooks or effect hooks inside a component.

You are allowed to call multiple state hooks or effect hooks inside a component. However, you should always call them in the same order each time the component renders.

Rule 4: Always call multiple hooks in the same sequence.

If you call multiple hooks in a component, you should always call them in the same sequence each time the component renders. This is because hooks rely on the order in which they are called to work correctly. If you change the order in which you call hooks, it could lead to errors.

Why are the rules of hooks important?

The rules of hooks are important because they help to ensure that hooks work correctly and that your React code is clean and maintainable. If you break the rules of hooks, you may encounter errors or unexpected behavior.

How to follow the rules of hooks

To follow the rules of hooks, simply keep the following in mind:

• Only call hooks from React component functions.
• Only call hooks at the top level of a React component function.
• You can call multiple state hooks or effect hooks inside a component.
• Always call multiple hooks in the same sequence.

If you are unsure whether or not a particular piece of code follows the rules of hooks, you can use the ESLint plugin eslint-plugin-react-hooks to check your code for errors.

Example

Here is an example of a React component that follows the rules of hooks:

JavaScript

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count: ${count}`);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

In this example, the useState and useEffect hooks are both called at the top level of the component function. They are also called in the same order each time the component renders.

Conclusion

Following the rules of hooks is important for writing clean and maintainable React code. By following the rules of hooks, you can avoid errors and ensure that your hooks work correctly.

Is this code using a valid invocation of a hook? 

if (data !== '') { 
   useEffect( () => { 
    setData('test data') 
   }) 
}

No

That’s correct. The useEffect hook has been used inside the If conditional statement, and that makes the use of the hook in this code invalid.

By now, you should have a fairly
good idea about the purpose and functionality of hooks in React. And you may have even started using
hooks in some of your solutions. If so, you may have encountered some
cases where hooks might have made your code invalid. Well, that’s because there are a few basic
rules to hooks that you need to be aware of and follow in your React apps. In this video, you will learn all
about the rules of hooks in React and why they are so important, and why you
would only call hooks at the top level and from React functions. The four main rules of
hooks are as follows. First, you should only call hooks
from a React component function. Second, you should only call hooks at the
top level of a React component function. Third, you are allowed to
call multiple state hooks or effect hooks inside a component. And finally, always make these multiple
hook calls in the same sequence. Now, let’s unpack each of these
rules in a little more detail. The first rule means that you should
not be calling hooks from regular Javascript functions, instead you should only call them from
inside a React component function. From a built-in hook call, for
example, from the useEffect hook or from a custom hook. In this example, the code describes a button that can be
clicked to pick up a new name for a pet. The nameLooper function is used to limit
the pet name choices to only fluffy, rexy, or gizmo. Notice that the useState hook is
accessed at the outermost scope of the app function, it has not been
used anywhere other than this. For example,
inside the nameLooper function scope. However, you may have observed that
this rule does not prevent you from using the state setting function
which is named setPetName here. State setting calls can be
used wherever required. The second rule means you must call your
hooks before a return statement outside of loops, conditions or nested functions. If you use a hook in a condition,
you’re breaking rules. For example, here, the useEffect
hook has been used inside the if conditional statement, that makes the use
of the hook in this code invalid. The third rule is straightforward. There can be multiple hook calls as long
as they are always in the same order. What that means is that you cannot place
hook calls inside conditional because that might result in an invocation of a hook
being skipped when compared with the previous render. In this example, with the same code that
describes a button that can be clicked to pick up a new name for a pet, the useState
hook has been used incorrectly. Rather than using the state setting
function said petName inside the nameLooper function, the useState
hook has been used here instead. If you were to compile the code and
run the app, you may find that the expected
output is returned. For example, I’d like to name my pet fluffy with a pick
a new name button rendered beneath. However, as soon as you click
the pick a new name button, you would receive an invalid
hook called error. That would violate the fourth rule. In other words, it might disrupt the sequence of
invocation from one render to the next. Such a violation would result in errors. If you want to call an effect
conditionally you can still do so, but make sure to place
the condition inside the hook. Here, the useEffect hook is invoked
initially followed by the if conditional statement. So now, you’re not breaking the rules and
the code is valid. So let’s recap on the four
main rules of hooks. You should only call hooks from
a React component function. You should only call hooks at the top
level of a React component function. You are allowed to call multiple state
hooks or effect hooks inside a component. And finally, always make these multiple
hook calls in the same sequence, and that’s it. In this video, you learn the main
rules of using hooks in React and why you would only call hooks at the top
level of and from React functions. As long as you stick to
these few simple rules, you can enjoy using hooks in your
React solutions successfully.

What you need to know before fetching data in React

Fetching data is a common task in React applications. We often need to fetch data from a server to display it in our components. However, there are a few things you need to know before fetching data in React.

1. Understand how asynchronous programming works in JavaScript

JavaScript is a single-threaded language, which means that it can only do one thing at a time. This can be a problem when fetching data, because we don’t want our application to freeze while we wait for the data to be retrieved.

To get around this, JavaScript uses a technique called asynchronous programming. Asynchronous programming allows us to start a task and then continue executing other code while the task is being completed.

When we fetch data in React, we are using asynchronous programming. This means that we need to be prepared to handle the results of the fetch operation asynchronously.

2. Choose the right data fetching library

There are a number of different data fetching libraries available for React. Some of the most popular libraries include:

• Axios
• Fetch
• Relay
• Apollo Client

Each of these libraries has its own strengths and weaknesses. It is important to choose the library that is right for your needs.

3. Consider using a state management library

State management libraries can help you to manage the state of your React application. This can be especially helpful when fetching data, because you need to keep track of the loading state of the data, the errors that may occur, and the data itself.

Some of the most popular state management libraries include:

• Redux
• MobX
• Recoil

4. Use a consistent fetching strategy

It is important to use a consistent fetching strategy throughout your React application. This will help to make your code more maintainable and predictable.

One common fetching strategy is to use the following steps:

1. Create a component that is responsible for fetching the data.
2. Use the useState hook to track the loading state of the data and the errors that may occur.
3. Use the useEffect hook to fetch the data when the component mounts.
4. Display the data in the component once it has been fetched.

5. Handle errors gracefully

It is important to handle errors gracefully when fetching data. This means that you should have a plan for what to do if the fetch operation fails.

One common approach is to display an error message to the user. You may also want to log the error to the console so that you can track it down and fix it.

Conclusion

Fetching data is a common task in React applications. By following the tips above, you can ensure that your code is efficient, maintainable, and predictable.

Which of the below statements is an accurate description of JavaScript utilizing the fetch function?

When JavaScript uses the fetch function it is delegating duties to an external API so that it can continue its process. This is known as asynchronous JavaScript.

That’s correct. The fetch function utilizes external APIs to perform tasks that would be cumbersome for JavaScript to fulfil alone.

The Fetch function is
a very useful tool, but there are some important
things that you need to understand before you
start using them. Initially, it’s good to get an overview of how
JavaScript delegates duties so that you
can gain insight into how the Fetch function
contributes to this process. In this video, you
will learn how the Fetch function works
to retrieve data from the web and how to provide an example in plain
JavaScript of the process. Fetch is used to make
a server requests to retrieve some
JSON data from it. Fetch API is a set of
functionalities that we have at our disposal to use in JavaScript to make
such a server request. It’s a bit like a clerk
at the post office. Say you’re bringing a package to the post office and you’re
the first in the queue. The clerk on the other side of the service desk is JavaScript. Since they can only do
one thing at a time. They go through the process
of getting your details, measuring the weight
of the package, pasting stamps onto the package, charging you for the service, and go into the back-office and carrying the package there, then taking time to find the correct place for the
package before it gets shipped. The problem with this
approach is that the next step cannot start before the previous
one is finished. That’s what’s known as
single-threaded execution. Since JavaScript is not at
all equipped to multitask, a way to go around this
issue is as follows. First, JavaScript
gets your details. At the same time, it calls a clerk to measure
the weight of the package. Then JavaScript calls yet another clerk to paste some
stamps onto the package. Javascript calls
yet another clerk to charge you for the service, and yet another clerk is called to carry the package
to the back-office, allowing JavaScript to take
care of the next customer. Essentially, this delegation
of duties is what’s referred to as
asynchronous JavaScript. In this metaphor,
you can think of the browser as the post office, Javascript as one clerk
in the post office and all these other clerks
can be referred to as browser APIs or web APIs. Now let’s explore a
practical example of how this delegation of
duties works in JavaScript. I have a local HTML file. The most important part of
this file is the script tag, which is getting some JavaScript
code from the file named script.js located in the same
folder as this HTML file. I’m serving these
files locally using the live server VS
Code extension. Let me inspect this HTML
file in the browser. Currently it only shows H_1 heading that
reads fetching data. Now, let me take a step back and let’s say the JavaScript, the post office worker, needs to get some user data
from the computer database. Here is the JavaScript
code inside the link to script.js file. What do you expect the output
of this code will be since JavaScript can only do one single thing
at any given time. Well, let’s explore what the
code is doing step-by-step. On Line 1, it performs a console log for the words
another customer approaching. Then it contacts the Fetch API, which is a browser API that is external and separate
from JavaScript. Rather than waiting for the Fetch API to return
the information, it keeps on executing the
code that comes after it, outputting the texts that
begins our valued customer. In the meantime, the Fetch API requests some user data
from a third party web-based API available at the random user dot.me Website. The fetch function is what’s
known as a facade function. Meaning it’s a function that looks like it’s
part of JavaScript, but actually it is
just a way for me to call a browser API
from JavaScript. In other words, it’s a way
for me to access a piece of browser functionality
that’s outside of JavaScript. You can think of it as the
JavaScript post office clerk calling the records
department of the post office to get some
data about a customer. When the other clerk
gets back with the information and hands it over to the
post office clerk, then they will get a
JSON representation, and finally, we’ll log
that data to the console. That means that the sequence of console logs from the
code will be as follows. An initial console
log that outputs another customer approaching
a second console log that outputs our valued
customer please wait a moment while I get
some information back from the
records department, and a final console log
that outputs the data. I will now execute this code to confirm that
describe the behavior. Everything is already saved. All I need to have this code executed is to go
back to the browser, right-click on the
page and press the reload command to refresh it. You can achieve
the same result by pressing the F5 key
on your keyboard. Now, I first get
another customer approaching then the
our valued customer. Finally, the result of the
call to the third party API. This is how JavaScript, although being single-threaded, can perform asynchronous
operations. In this video, you learned how the Fetch function works
to retrieve data from the web and how to provide an example in plain
JavaScript of the process. You should be familiar
with this concept before fetching data in React, which I’ll explore soon.

Fetching data – Putting it all together in React

Overview:

In React, we can use the useState and useEffect hooks to fetch data from an API and then display it in our component. The useState hook allows us to store and update data that is specific to the component, while the useEffect hook allows us to perform side effects in our React components, such as fetching data or setting up subscriptions.

Steps:

1. Import the useState and useEffect hooks from React.
2. Declare a state variable to store the fetched data.
3. Create a fetch data function that uses the fetch() API to fetch data from the API.
4. Use the useEffect hook to call the fetch data function when the component mounts.
5. Use conditional logic to render the fetched data in the component.

Example:

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    setData(data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (data.length === 0) {
    return <p>Loading data...</p>;
  } else {
    return (
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
};

export default MyComponent;

In this example, we use the useState hook to store the fetched data in the data state variable. We then use the useEffect hook to call the fetchData function when the component mounts. The fetchData function uses the fetch() API to fetch data from the API and then stores the data in the data state variable.

Finally, we use conditional logic to render the fetched data in the component. If the data state variable is empty, we render a “Loading data…” message. Otherwise, we render a list of the fetched items.

Tips:

• Use the useEffect hook to fetch data when the component mounts or when a dependency changes.
• Use conditional logic to render the fetched data in the component.
• Handle errors gracefully.
• Use a loading spinner or other indicator to let the user know that the data is being fetched.
• Use caching to improve performance.

Conclusion:

Fetching data from an API is a common task in React applications. By using the useState and useEffect hooks, we can easily fetch data and display it in our components.

Which of the statements below best describes how the fetchData function is working? 

The fetchData function is initially fetching data from the randomuser.me API, next it retrieves a response from the API in JSON format, and finally updates the state variable with the returned data.

That’s correct. The fetchData function initially fetches data from the randomuser.me API, next it retrieves a response from the API in JSON format, and finally updates the state variable with the returned data.

The little lemon restaurant wants to run a competition for its customers where
lucky customer will receive a free
meal at a restaurant. All customers that
are signed up to the little lemon
app will be entered into the competition and a random customer will be
selected as the winner. In this video, I will
show you how to get some random user
data from a website. I will be using the
random.me website to access random user data
for this demonstration. I have prepared some
code for this app to fetch the user data
from the website. If I execute this code, it will initially
output the data pending texts in the H1 heading. At the same time
in the background, it will be carrying out
the fetch data function to retrieve the user information from the random user website. Notice that I have the dev tools open and the Network tab active. I will click on the North
router link dropdown to artificially slow
down my connection. In the dropdown, I will
choose the slow 3G preset. This is so that I can observe
the data pending text in the heading before the data
gets fetched from the web. Once the data has been
successfully fetched, it updates the view with
the data returned H1 heading and the user information
that has been retrieved. In this example,
the data that was requested was the first name and the last name of
this random user. Let’s step through this
code in more detail. So first, I have the app
function and inside of it, following the rules of hook, I’m invoking the use state hook at the top level
of the component. The initial value of the state variable is an empty array. Next, I have defined the
fetch data function, which is fetching data from
the random user.name API, then it retrieves
the response from the API in JSON format. It then updates the state
variable with this JSON data. You may notice that I’m
not using a hook inside the fetch data function because that’s against the
rules of hooks. After that, I’m calling the use effect hook and from inside
they use effect hook, I’m calling the
fetch data function which I’ve defined previously. Finally, I’m using
conditional logic to decide what to return. First, I’m using the
object.keys code snippet to put all the keys of the
user object into an array. Since object.keys
returns an array, I can access the length
property on this array and check if the length of this array is greater than zero. If it is, it means
that the contents of the state array has changed
because as you may remember, the state variables
array was empty. So if the array is
no longer empty, then the div section
will be returned with the H1 tag and a
couple of H2 tags. Otherwise, the H1 tag below is returned that
reads data pending. Sometimes it can take a
little bit of time for the fetch data function to
retrieve the data requested. Therefore, the data
pending message will be displayed initially after
the code is executed. Once the data has arrived
from the fetch data call, this change in state causes
a re-render of my component. So the return statements
ternary operator is re-evaluated and that returns all the data from my
call to the fetch API. This is essentially how you get data from the web using React. So the a little lemon
restaurant would be able to apply
the same logic to their customer list API to select a random winner
for their competition. In this video, you have
learned how to fetch data using the state
and effect hook.

Tutorial on APIs in React

APIs (Application Programming Interfaces) are a way for different software components to communicate with each other. They are used in a wide variety of applications, including React.

To use APIs in React, you can use the fetch() API or a third-party library like Axios. The fetch() API is a built-in JavaScript API that allows you to make HTTP requests. Axios is a popular third-party library that makes it easier to use the fetch() API and provides additional features.

To make an API call in React, you can use the following steps:

1. Import the fetch API or Axios.
2. Define the endpoint URL that you want to call.
3. Make the API call using fetch() or Axios.
4. Handle the response from the API.

Here is an example of how to make an API call in React using the fetch() API:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

This code will make an API call to the https://api.example.com/users endpoint and then set the users state variable to the data that is returned from the API. The useEffect() hook is used to ensure that the API call is only made once, when the component is first mounted.

Once you have made the API call, you can use the data that is returned in your React component. In the example above, the users state variable is used to render a list of users.

Here are some additional tips for using APIs in React:

• Use a consistent naming convention for your API endpoints. This will make it easier to read and maintain your code.
• Document your APIs thoroughly. This includes providing clear and concise documentation for each endpoint, as well as examples of how to use the API.
• Use error handling to handle any errors that may occur when making API calls.
• Use caching to reduce the number of API calls that you need to make.

By following these tips, you can use APIs effectively in your React applications.

Imagine opening up
the landing page of Facebook or Instagram and all you see is just
emptiness because the things that fills
the data in there, the photos and the words and
the likes and the comments, all of those things are
coming through the API. Writing APIs with integrity, with efficiency is
an important part of the application development
process and without it, you basically don’t
have an application. My name is Murtadha. I’m a
software engineer at Meta, working in the Seattle office. The design process at Meta for APIs usually involves
multiple iterations, just in the same way
that when we write code, we get our peers and
colleagues to review it. We do the same with API. Somebody or a group of people would usually write
a document that’s a proposal for how the API would be and
what the structure is, what the agreements that each part of the application
will make with each other. Then that proposal is
usually placed forward. Other engineers will review
it, they’ll leave comments. They’ll say, this make sense, this needs to be changed,
this is not good. Then we iterate, we improve it. Then when the API
is looking good, it’s in the final stage we
then take it to the next step, which is building it. The building process,
the same thing happens. We’re going to
review the code that is implementing the design that was created and there are comments and feedback
and iterations. Once that’s complete, then
we have our API ready. Usually the process
of developing an API involves engineers on all
ends of the spectrum. We would be talking to the
front-end engineers and the back-end engineers
and people working in the middle layer in-between as well to make sure
that the APIs are consistent and make sense
across the entire stack. Basically, if you think about
APIs to just simplify it, it’s a way to talk
to different things. If you have your mobile phone, you have your application that you’re holding
in your hand, it has to talk to the server. The way it talks to the
server is through an API. If you want to
talk to something, you have to establish
some understanding. That understanding
is established between the developers
in order for it to be built into the
application and reflected in the way that
the API is designed. There are few things
we look for and follow when we’re
designing APIs. One of them is
ensuring type safety. Type safety is basically
a way to ensure that when you’re fetching
something from the back-end, you’re going to get
what you’re expecting. If you’re requesting a photo that you actually
do get a photo, not a video or something else. That’s an important
part of designing API to make sure
things don’t break. A lot of the
application failures happen when there’s a
mismatch in the data. Where you fetch
something you expect a certain object and
you get something else. That type safety
ensures these mistakes or problems are minimized and it increases the stability of
an application when you have that consistent type
safety across the stack. One of the things that I usually struggle with when designing API is making it such that
it will work for the future. There’s a little
bit of a sweet spot to aim for with this
that we can obsess about wanting to make
our APIs very compatible with the future and trying to anticipate how the
application will evolve, and we’re going to
need this and that, and let’s make it right away. But also sometimes that
could be too much. Finding that balance where
you think about the future, but not so much such that you’re holding yourself back from actually getting the work done. It’s just like with
everything in life, you try to anticipate, but also you try
to also focus on the problem in front
of you now and how you can address it effectively. I know APIs can be a little
overwhelming at times, so I’m wishing you
the best of luck. Take your time to learn them and don’t let that overwhelm
you or intimidate you. It’s okay that when
you’re looking at APIs you’re going to be
venturing into the back-end. Just know that you are taking on more scope and
more complexity and that’s going to be good
for you because you will become more attractive
to employers, you will expand your knowledge. Don’t let that intimidate
you or hold you back. It’s going to be
helpful to learn these skills and concepts. The advice that I want to give myself and everybody
who’s thinking about APIs is to keep it simple. Sometimes we tend
to overthink too and try to cram so
many things into APIs and try to make
it very fancy and very using complicated and
complex design patterns. But actually simplicity,
it is really important in API design and the readability
of it is a big plus. Keep it simple and try to keep it stable
and free of bugs.

What is useReducer?

The useReducer hook is a React hook that allows you to manage state in a more predictable and efficient way than the useState hook. It takes a reducer function and an initial state as arguments and returns the state and dispatch method.

The reducer function is a function that takes the previous state and an action object as arguments and returns the new state. The action object is an object that has a type property that identifies the specific action to be performed.

The dispatch method is a function that allows you to dispatch actions to the reducer function.

How useReducer differs from useState

The useReducer hook differs from the useState hook in a few key ways:

• useReducer takes a reducer function and an initial state as arguments, while useState only takes an initial state as an argument.
• useReducer returns the state and dispatch method, while useState only returns the state.
• useReducer makes it easier to reason about state changes and to avoid side effects.
• useReducer is more efficient, as it only recomputes the state that is actually needed.

When to use useReducer

You should use useReducer instead of useState when:

• You have complex state logic to manage.
• You need to avoid side effects.
• You need to improve the performance of your application.

Example of using useReducer

Here is a simple example of how to use the useReducer hook to manage the state of a counter:

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const initialState = {
  count: 0,
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>Counter: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

This code will render a counter with two buttons, one to increment the counter and one to decrement the counter. When the user clicks either button, the dispatch method is called with an action object with the type INCREMENT or DECREMENT. The reducer function then updates the state to increment or decrement the counter, respectively.

Conclusion

The useReducer hook is a powerful tool for managing state in React applications. It is more predictable and efficient than the useState hook, making it a better choice for many situations.

Which of the following statements is true about the useReducer hook? 

The useReducer hook starts with an initial state and reducer function 

That’s correct. The useReducer hook gets an initial state and a reducer function.

By now, you should have a
fairly good understanding of the useState hook and be able to practically apply it
to your solutions. However, the useState hook
does have its limitations. For example, the useState hook may become cumbersome
if you have complex state logic
that involves multiple sub-values or when the next state depends
on the previous one. In these situations
they useReducer hook can provide a much
better alternative. In this video, you’ll
learn more about use reducer and how it
differs from useState. You can think of the useReducer
as a superpower usestate. They useState hook starts
with an initial state, but they useReducer hook gets a reducer function in addition
to the initial state. This is beneficial because
the reducer functions second argument is
the action object. This object has
multiple type values, and based on each of
these types values, you can invoke the
dispatch function to perform a specific operation. Now, say the little
lemon restaurant is growing in
popularity and demand. As a result, keeping track of expenses is becoming an issue. Far, they have been calculating the income and
outgoings manually as they sell meals to
their customers and buy ingredients to
replenish the stock. Little lemon is
looking for a solution to this using React in order to keep track of expenses in their app and reduce the
burden on their staff. Because using the
useState hook would make the solution to this
unnecessarily extensive. This is a perfect
opportunity to implement the useReducer hook in
order to simply keep track of the cost of buying
ingredients and the income generated from selling the finished meals
to the customers. Now, let’s explore how to
implement the useReducer your hook in a code example to reinforce your understanding. Imagine I am coating
the expenses tracking application for little
lemon discussed earlier, using React and use reducer. With this app, I can
track two actions. The cost of buying ingredients
to prepare the meals and the little lemon restaurant
in the income from selling the finished meals to the customers and
the restaurant. For the sake of simplicity, I’ve only added two actions. Buy ingredients and sell meals. The reducer function takes in the previous state and an action and returns
the new state. The action type determines the specific action
of the reducer. Actions can have any form. By convention, it’s
common to pass objects with a type property
identifying the action. You should include the
minimal necessary information that the reducer needs to
compute the next state. You can find out more about
extracting state logic into a reducer in the additional readings at
the end of this lesson. Instead of using setState
like the useState hook, you use the dispatch method
of the useReducer hook. This accepts an
object literal with a single property
called type set to a matching action datatype whose behavior is defined
inside the reducer function. As I’m already serving
this app in the browser. Let me demonstrate how it works. When I press the shopping
for veggies button, the amount in the wallet
decreases by ten. When I press the server
meal to the customer, the amount in the wallet
increases by ten. With useReducer, you can define more types as many as you need. This way, you can
easily work with more complex logic
in your React apps. Something that might
be too difficult to rationalize when using useState. To explore this in practice, let’s add another action type. I’ll name it celebrity visit. This action should be triggered when a celebrity
visits the restaurant, which brings in $5,000 to the
restaurant when it happens. To make this work, I’ve added another action
type to the reducer function, and then another
button to trigger it. I’ll save my changes and preview the updated
app in the browser. There. It’s all
working as intended. Clicking the celebrity
visit button increases the wallet amount by 5,000
and it’s as simple as that. Now the little lemon restaurant will be able to keep track of their expenses so that they have a clear view of how much profit they’re making from
their business. In this video, you have learned about the useReducer hook, how it differs from
the useState hook, and why it can be a beneficial and more efficient solution in certain circumstances.

Tutorial on useRef to access underlying DOM in React

The useRef hook in React allows you to access and interact with DOM elements directly. This can be useful for a variety of tasks, such as focusing the cursor into an input field, scrolling to a specific element, or animating an element.

To use the useRef hook, you first need to create a ref object using the useRef() function. This returns an object with a single property, current, which is initially null.

Once you have a ref object, you can assign it to a DOM element using the ref attribute. When React renders the element, it will set the current property of the ref object to the DOM node.

You can then access and interact with the DOM node using the current property of the ref object. For example, you can call the focus() method to focus the cursor into the input field, or you can call the scrollIntoView() method to scroll to the element.

Here is an example of how to use the useRef hook to focus the cursor into an input field:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef();

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

In this example, the useRef() function is used to create a ref object called inputRef. This ref object is then assigned to the input element using the ref attribute.

When the user clicks the button, the handleClick() function is called. This function accesses the current property of the inputRef ref object and calls the focus() method to focus the cursor into the input field.

You can use the useRef hook to access and interact with any DOM element, not just input fields. For example, you could use it to scroll to a specific element, animate an element, or perform other DOM-related tasks.

Here are some additional tips for using the useRef hook:

• The useRef hook can be used to persist values across renders. For example, you could use it to store the scroll position of a window so that you can restore it the next time the component is rendered.
• The useRef hook can be used to access and interact with custom components. For example, you could use it to access the DOM node of a child component and call a method on it.
• Be careful not to overuse the useRef hook. It is generally best to only use it when you need to access or interact with the DOM directly.

What is the data type of the returned value from the useRef hook invocation? 

An object

That’s correct! The returned value from the useRef hook invocation is an object.

Imagine the owner of
Little Lemon would like a search inventory
functionality that would focus the cursor into
the search input field. In this video, I
will demonstrate how to code this specific
requirement in a separate app so that you can focus on this particular
functionality. Here I have another
example app built using Create React App or CRA. Note that for the purpose
of this demonstration, I have made some
tweaks so that I can more easily showcase
the useRef hook. My starting app is just
a return statement with a fragment and inside of it an H1 that reads using useRef to access
the underlying DOM. As I’d like to demonstrate how they useRef hook is
used to access the DOM, I will use it to focus the
cursor into an input field. So let me start by
adding the input field. I will also add a button. Now that I’ve added an on-click
event handling attribute, I need to define the
focus input function to handle the button clicks. For the sake of simplicity, my click handler only accesses
the form input ref object, and then it accesses
the focus method on the current property which exist on the form
inputRef objects. But what is this object and
where does it come from? This object is the return value of invoking the useRef hook. So in this update
to my function, I’m invoking the React
User a function, and I’m saving a Ref object, that is the value returned from that function invocation to a variable named form input ref. Then setting the JSX
expression of form inputRef as the value of the ref
attribute on the input element. React will create
the input elements DOM node and render
it on the screen. This DOM node is
assigned as the value of the current property
of the ref object. This makes it possible to access the input DOM node and
all its properties and values using the syntax
form inputRef.current. Since I want to access the focus function on the
input elements DOM node, I’m using the syntax form
inputRef.current.focus. This allows me to
move the focus to the input field so that
it is ready to be typed into without the user having
to click tap or tap into it. This is now triggered
on a button click. To confirm that this works, I will save all my changes, go to my app being
served in the browser. Click outside of the input box and click the focus
input button. Great, everything is
working as expected. You have just
learned about using the useRef hook to hook
into the DOM and work with the properties of a
specific DOM node that you choose based
on the task at hand.

Well done. You’ve
reached the end of this module on React
hooks and custom hooks. Throughout this module,
you’ve explored hooks and React in
depth and covered many important concepts and practical applications that will benefit you as you progress
through the course. It’s now time to recap the key lessons you’ve learned
and skills you’ve gained. Your first lesson focused
on the useState hook, which is used to work with
state in a React component. You’ve explored how to perform
array destructuring using the useState hook and
update state when using new state through the
state updating function, and even how to change
state and response to user generated events
like button clicks. You then worked through a
detailed demonstration, learning how to use the useState
hook within a component, including how to declare, read, and update state. Next, you learned about
side effects in relation to another important hook,
the useEffect hook. You discovered that side effects make a function impure with impure functions
performing side effects such as invoking console log, fetch or the browser’s
geolocation functionality. In addition to learning about the useEffect hook
theoretically. You learned how to use
the useEffect hook to perform side effects within
functional components and to control when the
useEffect function is run using the dependency array through a practical
demonstration. Recall that the dependency array determines when the useEffect
hook will be invoked. Following the completion of
Lesson 1 of this module, you should now be
better positioned to work with state and React and to handle side
effects in your components. The second lesson of
this module focused on the rules of hooks and fetching
JSON data from the web. First, you were introduced
to the rules of hooks and React
and unpacked them. These rules are that
you should only call hooks from a React
component function and at the top level of a React component function or allowed to call
multiple state hooks or effect hooks inside a
component and should make multiple hook calls
in the same sequence. Next, in relation to
the fetch function, you learned about the
delegation of duties in JavaScript referred to as
asynchronous JavaScript. You also learned about the
fetch function itself, which is a function that looks like it’s part of JavaScript, but it’s actually a way to call a browser API from JavaScript. This led up to the
lesson on fetching data using the state
and effect hooks. You worked through a
demonstration where a call to the fetch API was used to get data from the web using React. Now that you’ve
completed this lesson, you should have greater
insight into what happens if a developer doesn’t follow
the rules of hooks and React, and be able to
describe how data is fetched in both
JavaScript and React. In the third lesson
of this module, you learned about
the useReducer hook and that it differs from the useState hook
because it gets a reducer function in addition
to the initial state. You learned that the
useReducer hook could be used in cases where they
useState hook would be inefficient such
as when you have complex state logic and how to implement the useReducer
hook in your code. You were also introduced to the concept of refs and
how they can be used to go beyond the
virtual DOM and access the underlying DOM elements as well as other applications, and have the
opportunity to explore coding your own custom hooks. By completing this lesson, you should be able to use
the useReducer hook to track state as well as roll out your own hooks in
your React apps. You’re making
excellent progress. Now that you have a solid
grasp of working with hooks, it’s time to take a
deep dive into JSX, which I look forward to guiding you through in the next module.