Learn.md

Learning Through This Project:

Random-Color-Lab Project is easy to play and understand color guessing game. I created this website while learning front-end development. In this project, I used all the basic React JS principles (components, properties, and hooks), and color hex codes are stored using the useState() and all the colors are set to grey for the initial render using useEffect() - Hook concept. I believe this project will help the learners to understand the basic concepts of React and how to implement them.

👉Through this readme, you will learn about two of the hooks provided by React, called useState and useEffect. useState() sometimes called "State Hook" lets us add native state to React function components. useEffect() sometimes called "Effect Hook" is used to direct the component to perform an action as it renders.

What is a Hook?

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

When would I use a Hook?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

What is "useState()" in React?

useState() is a Hook that allows you to have state variables in functional components . To use the useState Hook, we first need to import it at the top of our component. Like this:

Now, let's take an example of useState():

What does calling "useState()" do?

It declares a “state variable”. Here, our variable is isWin but we could call it anything else, like dolphin. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.

Some other examples:

• Line 6: Represents an array useState to hold 6 different color hexcodes.
• Line 7: Represents a numerical useState and here its initial value is set to zero.
• Line 8: Represents a boolean useState and its initial value can be set to null/true/false.

What does "useState()" return?

It returns a pair of values: the current state and a function that updates it. This is why we write const [num, setnum] = useState().

For example:

• Line 1: We import the useState Hook from React. It lets us keep local state in a function component.
• Line 4: Inside the Example component, we declare a new state variable by calling the useState Hook. It returns a pair of values, to which we give names. We’re calling our variable num because it holds the number of button clicks. We initialize it to zero by passing 0 as the only useState argument. The second returned item is itself a function. It lets us update the num so we’ll name it setnum.
• Line 9: When the user clicks, we call setnum with a new value. React will then re-render the Example component, passing the new num value to it.

What is "useEffect()" in React?

useEffect() is a Hook that tells React that your component needs to do something after render. React will remember the function you pass inside the useEffect() and call it later after performing the DOM updates. To use the useEffect Hook, we first need to import it at the top of our component. Like this:

Now, let's take an example of useEffect():

What does calling "useEffect()" do?

It performs a function whenever the page / component is rendered. This function is referred to as in React as an "effect". Here, we useEffect is being used to set states - isWin and hexcode for the initial render of the component.

• Line 15: Sets the isWin state to empty string.
• Line 16: Sets the hexcode array to an empty array.
• Line 17: Performs a loop 6 times in order to set all the values in the hexcode array to grey color.

The component for the initial render looks like this:

What is "useCallback()" in React?

useCallback() is a Hook that returns a memoized function. This essentially means that, React creates a "cached" version of the function. To use the useCallback Hook, we first need to import it at the top of our component. Like this:

import { useCallback } from 'react';

Now, let's take an example of useCallback():

useCallback(() => {}, []);

What does calling "useCallback()" do?

The memoized (or "cached") function changes only if any of the values passed to it in the dependency array changes. This in turn, saves time and resources, because React doesn't need to redefine the same function every time a component re-renders.

const resetRandomised = useCallback(() => {
    const newArray = new Array(numberOfColors);
    for (let idx = 0; idx < hexcode.length; idx++) {
      newArray[idx] = `#${Math.floor(Math.random() * 16777000).toString(16)}`;
    }
    setHexcode(newArray);
    setnum(Math.floor(Math.random() * 6));
    setIsWin(null);
  }, [hexcode.length]);

• const resetRandomised = useCallback(() => { ... - This is the function that is being memoized.
• ... }, [hexcode.length]); - This is the dependency array. The function will only change if the length of the hexcode array changes.

Other technologies used in this project

Prettier?

Prettier is an open source, opinionated, code formatter which can be used to format all of your files so that they all follow the same coding style.

This helps when working on large project with multiple contributors to ensure that everyone follows the same same formatting standard

Husky/Pre-commit hooks

A pre-commit hook is a script that is run before the git commit command is run to perform certain checks within the code you'd be commiting (such as code formatting).

The pre-commit hook provider we use here is Husky