Now that we've set up our project, we can start working on individual components and start using React hooks. First, let's check out the Canvas API and main React hooks that we'll be using in the course.

Canvas API is a browser-native API that enables developers to draw on HTML 

 element using JavaScript, allowing them to create 2D and 3D graphics used for animations, data visualisation, games, video processing, etc.

 for drawing and rendering graphics. This 

 element, once it's selected using JavaScript.

Canvas API context shouldn't be confused with React Context which is generally used for passing data. We won't be using React Context features in this course, so when talking about the context, we'll be referring to the Canvas API context.

 we can access various types of contexts by providing an attribute to the method. In this course, we'll need to use 2D graphics, so we'll pass 

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

 element when we start working on the painting functionality. For now, let's move onto next topic.

Let's dive into some of the core React hooks that we'll use during this course.

As you probably know, state is one of the React's core features. It allows UI to re-render and update as state value is changed without disrupting the user or refreshing the page. React watches for all those changes in state and handles the necessary DOM updates in the background.

 hook allows React developers access to React state in function components and allows them to decouple the state from the component in a custom hook.

It's a very simple hook that returns a tuple, which is a JavaScript array with two elements:

// Initializing empty (undefined) state
const [someState, setSomeState] = useState();

// Initializing non-empty state with an initial value
const [someOtherState, setSomeOtherState] = useState(INITIAL_VALUE);

This might look confusing at first, however, using an array allows us to rename the variables that are returned by 

 hook and initialize multiple state instances in the same component.

To keep track of multiple instances of state update function pairs, it's a recommended best-practice to use the same name as the state variable and prefix it with the word 

 state variable name, its input function should be named as 

const [<stateName>, set<StateName>] = useState();

 value in a state which user can change by typing into an 

 event handler to update the state using the 

 update function and rendering it inside a component.

import React, { useState } from "react";

export const SomeComponent = () => {
  const [username, setUsername] = useState("John");

  const handleChange = (e) => {
      setUsername(e.currentTarget.value)
  }

  return (
      <>
        <p>Hello {username}</p>
        <input type="text" value={username} onChange={handleChange}>
      </>
  );
}

React handles how and when each HTML element is rendered and updated, so selecting elements the usual JavaScript way is not recommended. You don't have to attach an 

 attribute on the HTML element you want to select. You have to initialize a ref value using the 

 prop to any HTML element. This is a core React prop, so you can use it right away.

import React, { useRef } from "react";

export const SomeComponent = () => {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
};

 can be used to store a value. Ref value can be accessed with 

 attribute of the ref object. Value can be also changed by assigning a new value to the 

const someRef = useRef(null);

// Assigning a value
someRef.current = "new value";

// Accessing the value
const refValue = someRef.current;

You might be asking yourself how is this different than storing it in an 

 hook? There is a significant difference between storing a value in a state and in ref. Whenever a state value changes, component will update and the new value will be updated in the UI. However, whenever a ref value changes, component won't update and the updated value won't be displayed in the UI.

 is useful for cases when you want to persist values between the re-renders but you don't want changes in those values to cause re-renders or those values are not used in the UI.

import React, { useRef } from "react";

export const SomeComponent = () => {
  const valueRef = useRef("initial");

  const onButtonClick = (e) => {
    valueRef.current = e.currentTarget.value;
    console.log(valueRef.current);
  };

  return (
    <>
      Current value (this won't change in the UI): {valueRef.current}
      <button value="new value" onClick={onButtonClick}>
        Set new Ref value
      </button>
    </>
  );
};

JavaScript const/let/var, useState and useRef

Let's thow regular JavaScript variables in the mix and review how individual types of data containers are used in React.

I get a lot of questions about when and how to use all these types of data containers. Using the wrong type of data container in React can cause performance issues (unecessary re-renders) or simply the changes in the data container don't get updated in the UI. So it's important to know when and how to use them. I've created a simple chart that outlines some general use-cases for each data container and you can go back to it if you have any doubts about which data container you should use.

This is another very useful and powerful basic React hook. 

 hook allows us to control the flow of the app by running a function wrapped inside the hook when component is first rendered, whenever some specific variable changes, or before the component unmounts (is removed from the DOM).

useEffect(
  () => {
    // Function body
  },
  [
    /* Dependency array */
  ]
);

/* This code will run on component mount and whenever someVariable changes */
useEffect(() => {
  fetchData(someVariable);
}, [someVariable]);

This is one of React basic hooks which uses a 

 - list of variables that will cause the function to run when at least one of the variables has changed.
There are several 

/* No dependecy array - function body runs on each render */
useEffect(() => {
  /*...*/
});

/* Empty dependency array - function body runs only on component mount */
useEffect(() => {
  /*...*/
}, []);

/* Non-empty dependency array - function body runs on component mount and whenever at least one variable in the array changes */
useEffect(() => {
  /*...*/
}, [firstVar, secondVar, thirdVar]);

If you aren't sure what should be included in the dependency array, Visual Studio Code does a great job of giving you hints about what should be added.

This hook is useful for controlling the component flow. For example, if you have a component that renders data fetched from an external API and the request doesn't depend on some changeable parameters, you don't want your component run a fetch function on each render. You want it to run only once - when the component mounts.

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

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

  useEffect(() => {
    fetch("https://some-api.example/data").then((data) => {
      setData(data);
    });
  }, []);

  if (!Boolean(data.length)) {
    /* Data is not loaded, yet, display a loading text */
    return <>Fetching data...</>;
  }

  return <>{/* Render API data */}</>;
};

Running the code before the component is unmounted doesn't depend on the 

, you only need to return a function within the 

 function body. The returned function won't run until the component unmount event is about to happen. This function is also called a 

 as it's mostly used for just that - removing event listeners, clearing timeouts or intervals, etc.

useEffect(() => {
  return () => {
    /* Cleanup function */
  };
}, []);

It's encourage to split the code into multiple 

 hooks depending on the functionality, so you aren't limited to a single hook instance per component. This is useful for code readability, performance and explicitly stating function dependencies.

We'll cover even more basic React hooks as we progress with our painting app. Let's apply everything we've learned so far and write our first components.

---
title: Canvas API and main React hooks
description: Checking out Canvas API and taking a dive into some React hooks
isPublicLesson: true
---

Now that we've set up our project, we can start working on individual components and start using React hooks. First, let's check out the Canvas API and main React hooks that we'll be using in the course.

## Canvas API

Canvas API is a browser-native API that enables developers to draw on HTML `<canvas>` element using JavaScript, allowing them to create 2D and 3D graphics used for animations, data visualisation, games, video processing, etc.

HTML `<canvas>` element allows JavaScript access via **context** for drawing and rendering graphics. This **context** can be accessed with `getContext` method that is provided by the HTML `<canvas>` element, once it's selected using JavaScript.

:::tip
Canvas API context shouldn't be confused with React Context which is generally used for passing data. We won't be using React Context features in this course, so when talking about the context, we'll be referring to the Canvas API context.
:::

Using `getContext` we can access various types of contexts by providing an attribute to the method. In this course, we'll need to use 2D graphics, so we'll pass `2d` value as attribute.

```js
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
```

I'll talk more in detail about using **context** to draw on `<canvas>` element when we start working on the painting functionality. For now, let's move onto next topic.

## Basic React hooks

Let's dive into some of the core React hooks that we'll use during this course.

### useState hook

As you probably know, state is one of the React's core features. It allows UI to re-render and update as state value is changed without disrupting the user or refreshing the page. React watches for all those changes in state and handles the necessary DOM updates in the background.

`useState` hook allows React developers access to React state in function components and allows them to decouple the state from the component in a custom hook.

It's a very simple hook that returns a tuple, which is a JavaScript array with two elements:

-   **First element** - state value
-   **Second element** - function that updates the state with a value passed as a function argument

```jsx
// Initializing empty (undefined) state
const [someState, setSomeState] = useState();

// Initializing non-empty state with an initial value
const [someOtherState, setSomeOtherState] = useState(INITIAL_VALUE);
```

This might look confusing at first, however, using an array allows us to rename the variables that are returned by `useState` hook and initialize multiple state instances in the same component.

To keep track of multiple instances of state update function pairs, it's a recommended best-practice to use the same name as the state variable and prefix it with the word `set`. For example, for `inputValue` state variable name, its input function should be named as `setInputValue`.

```jsx
const [<stateName>, set<StateName>] = useState();
```

In the following example, we keep `username` value in a state which user can change by typing into an `<input>` element. We are using the `<input>`element `onChange` event handler to update the state using the `useState` update function and rendering it inside a component.

```jsx
import React, { useState } from "react";

export const SomeComponent = () => {
  const [username, setUsername] = useState("John");

  const handleChange = (e) => {
      setUsername(e.currentTarget.value)
  }

  return (
      <>
        <p>Hello {username}</p>
        <input type="text" value={username} onChange={handleChange}>
      </>
  );
}
```

### useRef hook

`useRef` hook is primarely used for two things:

-   Accessing the DOM - selecting and accessing HTML elements
-   Persisting a value between re-renders

React handles how and when each HTML element is rendered and updated, so selecting elements the usual JavaScript way is not recommended. You don't have to attach an `id` attribute on the HTML element you want to select. You have to initialize a ref value using the `useRef` hook and pass it as `ref` prop to any HTML element. This is a core React prop, so you can use it right away.

```jsx
import React, { useRef } from "react";

export const SomeComponent = () => {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
};
```

Other than selecting HTML elements, `useRef` can be used to store a value. Ref value can be accessed with `current` attribute of the ref object. Value can be also changed by assigning a new value to the `<refName>.current` attribute.

```jsx
const someRef = useRef(null);

// Assigning a value
someRef.current = "new value";

// Accessing the value
const refValue = someRef.current;
```

You might be asking yourself how is this different than storing it in an `useState` hook? There is a significant difference between storing a value in a state and in ref. Whenever a state value changes, component will update and the new value will be updated in the UI. However, whenever a ref value changes, component won't update and the updated value won't be displayed in the UI.

So `useRef` is useful for cases when you want to persist values between the re-renders but you don't want changes in those values to cause re-renders or those values are not used in the UI.

```jsx
import React, { useRef } from "react";

export const SomeComponent = () => {
  const valueRef = useRef("initial");

  const onButtonClick = (e) => {
    valueRef.current = e.currentTarget.value;
    console.log(valueRef.current);
  };

  return (
    <>
      Current value (this won't change in the UI): {valueRef.current}
      <button value="new value" onClick={onButtonClick}>
        Set new Ref value
      </button>
    </>
  );
};
```

### JavaScript const/let/var, useState and useRef

Let's thow regular JavaScript variables in the mix and review how individual types of data containers are used in React.

|                     | **Value persisted between re-renders** | **Value update causes re-render** |
| ------------------- | -------------------------------------- | --------------------------------- |
| **const, let, var** | No                                     | No                                |
| **useRef**          | **Yes**                                | No                                |
| **useState**        | **Yes**                                | **Yes**                           |

I get a lot of questions about when and how to use all these types of data containers. Using the wrong type of data container in React can cause performance issues (unecessary re-renders) or simply the changes in the data container don't get updated in the UI. So it's important to know when and how to use them. I've created a simple chart that outlines some general use-cases for each data container and you can go back to it if you have any doubts about which data container you should use.

|                     | **Use-cases**                                                                                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **const, let, var** | Temporary values that are valid only for the current state and render cycle - computed or formatted values that come from state or other sources.                                               |
| **useRef**          | Values that need to be persisted between renders, but are not shown in the UI and shouldn't cause renders - keeping track of previous value, maximum or minimum value, event handler data, etc. |
| **useState**        | Values that need to be persisted between renders, are shown in the UI and should cause re-renders.                                                                                              |

### useEffect hook

This is another very useful and powerful basic React hook. `useEffect` hook allows us to control the flow of the app by running a function wrapped inside the hook when component is first rendered, whenever some specific variable changes, or before the component unmounts (is removed from the DOM).

```jsx
useEffect(
  () => {
    // Function body
  },
  [
    /* Dependency array */
  ]
);

/* This code will run on component mount and whenever someVariable changes */
useEffect(() => {
  fetchData(someVariable);
}, [someVariable]);
```

This is one of React basic hooks which uses a **dependency array** - list of variables that will cause the function to run when at least one of the variables has changed.
There are several **dependency array value combinations** which produce different side-effects.

```jsx
/* No dependecy array - function body runs on each render */
useEffect(() => {
  /*...*/
});

/* Empty dependency array - function body runs only on component mount */
useEffect(() => {
  /*...*/
}, []);

/* Non-empty dependency array - function body runs on component mount and whenever at least one variable in the array changes */
useEffect(() => {
  /*...*/
}, [firstVar, secondVar, thirdVar]);
```

:::tip
If you aren't sure what should be included in the dependency array, Visual Studio Code does a great job of giving you hints about what should be added.
:::

This hook is useful for controlling the component flow. For example, if you have a component that renders data fetched from an external API and the request doesn't depend on some changeable parameters, you don't want your component run a fetch function on each render. You want it to run only once - when the component mounts.

```jsx
import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://some-api.example/data").then((data) => {
      setData(data);
    });
  }, []);

  if (!Boolean(data.length)) {
    /* Data is not loaded, yet, display a loading text */
    return <>Fetching data...</>;
  }

  return <>{/* Render API data */}</>;
};
```

Running the code before the component is unmounted doesn't depend on the **dependency array**, you only need to return a function within the `useEffect` function body. The returned function won't run until the component unmount event is about to happen. This function is also called a **cleanup function** as it's mostly used for just that - removing event listeners, clearing timeouts or intervals, etc.

```jsx
useEffect(() => {
  return () => {
    /* Cleanup function */
  };
}, []);
```

It's encourage to split the code into multiple `useEffect` hooks depending on the functionality, so you aren't limited to a single hook instance per component. This is useful for code readability, performance and explicitly stating function dependencies.

## That's a wrap for now

We'll cover even more basic React hooks as we progress with our painting app. Let's apply everything we've learned so far and write our first components.


Adrian Bece

Checking out Canvas API and taking a dive into some React hooks

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript