DEV Community: Yuki Kasugai

useContext + useReducer = powerful and flexible way to manage global state!

Yuki Kasugai — Thu, 13 Apr 2023 10:58:11 +0000

Have you ever used useContext and useReducer together in a React application? When I created a todo app, I initially used useContext, but I ended up double controlling the same state as both props and global state, which wasn't practical. So, I decided to refactor my code and started using useContext and useReducer instead. These hooks provide a powerful and flexible way to manage global state in a React application, without the need for prop drilling or duplicating state management logic so I will explain them.

What is useContext?

useContext is hook in React that allows you to access the value of a context directly in a functional component.
If you are not familiar with useContext, please check my article!

What is useReducer?

useReducer is also hook in React that is used to manage state in a more complex and structured manner than the useState hook, by following the Redux pattern of state management.
In order to understand the concept of useReducer, we need to know Redux pattern of state management.

What is Redux pattern of state management?

Reference

Here, you can imagine the State as your wallet.
When you click the Deposit button, the action (which is to add $10 to your wallet) is executed, and then the action is dispatched to the Store (which is like a central repository for managing the state).
The Reducer, which is a function inside the Store, receives the action and also gets the previous State (which is the information that your wallet has $0).
The Reducer then calculates $0 + $10 and updates the State accordingly (which means you finally get $10 in your wallet).

Benefit of using useContext and useReducer together:

Provides a way to manage global state in a React application without the need for prop drilling or a state management library like Redux.
Allows for a more structured and organized approach to state management with the use of reducers and actions, similar to Redux.
Makes it easy to share state and state update functions across multiple components without having to pass them down as props.

Example

Next, let's see the code which is using useContext and useReduder. I created simple count app.

App.jsx

import "./App.css";
import React, { createContext, useReducer } from "react";
import Counter from "./components/Counter";

// Create a context
export const MyContext = createContext();

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

// Define the initial state
const initialState = { count: 0 };

// Create a provider component
const MyContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

function App() {
  return (
    <div className="App">
      <MyContextProvider>
        <Counter />
      </MyContextProvider>
    </div>
  );
}

export default App;

Let's see the code one by one.

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

Inside MyContextProvide component, I declared useReducer which takes two arguments: reducer function and initialState.

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 };

The reducer function is responsible for handling state updates based on the action objects dispatched to it. action is plain JavaScript objects that contain a type property to specify the action type and an optional payload property to carry additional data for the action. (Here, we do not declare payload.)
The initialState is the initial value of the state.

const MyContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

Then MyContextProvider returns an array with two values: state and dispatch function. The state is the current value of the state managed by the reducer, and the dispatch function is used to dispatch actions to the reducer to trigger state updates.
children is a special prop in React that represents the child elements or components nested within a parent component. It is a common pattern used in React to pass down and render child components within a parent component.
In the MyContextProvider component, children is a prop that represents the child components that will be wrapped by the MyContextProvider. These child components will have access to the context values provided by MyContext.Provider, which includes the state and dispatch function in this case.

Counter.jsx

import React from "react";
import { useContext } from "react";
import { MyContext } from "../App";

export default function Counter() {
  const { state, dispatch } = useContext(MyContext);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}

useContext hook to retrieve the state and dispatch values from the MyContext object. Two button elements with an onClick event handler that dispatches actions with a type of "INCREMENT" or "DECREMENT" when clicked. These actions are handled by a reducer in App.jsx that provides the MyContext object, and they are used to update the count value in the state managed by the context, resulting in the Counter component displaying an updated count value when the buttons are clicked.

Conclusion

This approach can help eliminate the need for double controlling the same state as props and global state, making your codebase more efficient and easier to manage. It allows you to separate the concerns of state management from the UI components, making it easier to reason about and test your code. Overall, using useContext and useReducer together can provide a cleaner and more practical way to manage global state in your React application.

Reference1
Reference2

Let's use Context API in place of Prop Drilling in React.js!

Yuki Kasugai — Tue, 21 Mar 2023 21:10:57 +0000

Have you ever heard of Prop Drilling? For beginners of React.js learners, it is a need-to-know term.
When I created an App with React.js, I wanted to pass props down to the grandchild component from the parent component, so I also needed to pass the props to the child components, as it is a rule of using props.

According to the public documents,

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props.

In the following code, I did Prop Drilling. I passed the props down to TodoList component and then, I passed those to Todo component.

// APP.js
import { TodoList } from "./components/TodoList/TodoList";

function App() {
  const watchingCheckBox = (id) => {
    // Some Operation
  };

  const handleRemoveTodo = (id) => {
    // Some Operation
  };

  const reEditTodoName = (id, name) => {
    // Some Operation
  };

  let filteredTodos = todos;
  // Some Operation


  return (
    <div className="App">
      <TodoList
        todos={filteredTodos}
        watchingCheckBox={watchingCheckBox}
        handleRemoveTodo={handleRemoveTodo}
        reEditTodoName={reEditTodoName}
      />
    </div>
  );
}

export default App;

// TodoList.jsx
import React from "react";
import Todo from "../Todo/Todo";

function TodoList({
  todos,
  watchingCheckBox,
  handleRemoveTodo,
  reEditTodoName,
}) {
  return todos.map((todo) => (
    <Todo
      todo={todo}
      key={todo.id}
      watchingCheckBox={watchingCheckBox}
      handleRemoveTodo={handleRemoveTodo}
      reEditTodoName={reEditTodoName}
    />
  ));
}

export default TodoList;

// Todo.jsx
import { HiOutlineXMark } from "react-icons/hi2";
import React from "react";

function Todo({ todo, watchingCheckBox, handleRemoveTodo, reEditTodoName }) {

  const handleTodoClick = () => {
    watchingCheckBox(todo.id);
  };

  const handleRemoveClick = () => {
    handleRemoveTodo(todo.id);
  };

  const reEdit = () => {
    if (// Some Condition) {
      handleRemoveTodo(todo.id);
    } else {
      reEditTodoName(todo.id, reEditName);
    }
  };

  return (
    <div>
        <input
          type="checkbox"
          checked={todo.isCompleted}
          onChange={handleTodoClick}
        />{" "}
        <label>
          {todo.name}
        </label>
      <button onClick={handleRemoveClick}>
        <HiOutlineXMark  />
      </button>
    </div>
  );
}

export default Todo;

It seems like a bucket brigade. If the props-passing hierarchy is shallow, that is fine, but as your application grows, the hierarchy gets deeper. Then, you must pass down props to multiple components, which is not a good way to write clean and reusable code so it is called Prop drilling.

What is Prop drilling?

Prop drilling is a pattern in React where data is passed down from one component to another component, even if the intermediate components do not need the data. This often occurs when data needs to be passed from a high-level parent component down to a low-level child component that is several levels deep in the component tree. In order to pass data from the parent component to the child component, props are used.

So what should we use in place of Prop Drilling?
It is the Context API!

What is Context API?

Context API is a feature in React that allows data to be passed down through the component tree without having to pass props manually at every level. It provides a way to share data among components without the need to explicitly pass the data as props to each component that needs it.

In the following code, I changed my code with Context API. I used createContext(), SomeContext.Provider and useContext(). I also combined two files(TodoList.jsx and Todo.jsx) into one file.

createContext

createContext lets you create a context that components can provide or read.

const SomeContext = createContext(defaultValue)

SomeContext.Provider

Wrap your components into a context provider to specify the value of this context for all components inside:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

useContext

useContext is a React Hook that lets you read and subscribe to context from your component.

const value = useContext(SomeContext)

↓My code

// App.js
import { createContext } from "react";
import { TodoList } from "./components/TodoList/TodoList";

export const FilteredTodosContext = createContext();

export function App() {
  const watchingCheckBox = (id) => {
    // Some Operation
  };

  const handleRemoveTodo = (id) => {
    // Some Operation
  };

  const reEditTodoName = (id, name) => {
    // Some Operation
  };

  let filteredTodos = todos;
  // Some Operation


  return (
    <div className="App">
      <FilteredTodosContext.Provider
        value={{
          filteredTodos,
          watchingCheckBox,
          handleRemoveTodo,
          reEditTodoName,
        }}
      >
        <TodoList />
      </FilteredTodosContext.Provider>
    </div>
  );
}

// TodoList.jsx 
import { HiOutlineXMark } from "react-icons/hi2";
import React, { useContext, createContext } from "react";
import { FilteredTodosContext } from "../../App";

const TodosContext = createContext();

export function TodoList() {
  const { filteredTodos } = useContext(FilteredTodosContext);

  return filteredTodos.map((todo) => (
    <TodosContext.Provider value={todo} key={todo.id}>
      <Todo />
    </TodosContext.Provider>
  ));
}

export function Todo() {
  const todos = useContext(TodosContext);

  const { watchingCheckBox, handleRemoveTodo, reEditTodoName } 
    = useContext(FilteredTodosContext);

  const handleTodoClick = () => {
    watchingCheckBox(todos.id);
  };

  const handleRemoveClick = () => {
    handleRemoveTodo(todos.id);
  };

  const reEdit = () => {
    if (// Some Condition) {
      handleRemoveTodo(todo.id);
    } else {
      reEditTodoName(todo.id, reEditName);
    }
  };

  return (
    <div>
        <input
          type="checkbox"
          checked={todo.isCompleted}
          onChange={handleTodoClick}
        />{" "}
        <label>
          {todos.name}
        </label>
      <button onClick={handleRemoveClick}>
        <HiOutlineXMark  />
      </button>
    </div>
  );
}

Context API simplifies data management by allowing components to access data without passing it through multiple layers of props. In addition, it allows for global state management, which is helpful when multiple components need to share state.
Therefore, many developers prefer to use Context API.

My Learning about Promise, async/await, and Promise.all

Yuki Kasugai — Thu, 23 Feb 2023 23:59:31 +0000

I felt that I lacked an in-depth understanding of Asynchronous when I created the app fetching data from external API so I revised it and I integrate my learning here. I heard we use async/await and Promise.all very often in the real industry. I am going to introduce that topic.

Promise

Promise is an object through which you could do some async operations.
Promise has three states.

Fulfilled State - Success State
Rejected State - Failure/Reject State
Pending State - Waiting for response

let myPromise = new Promise((resolve, reject) => {
  resolve("Hi I was resolved!"); // Fulfilled State
  reject("HI i was rejected"); // Rejected State
});

myPromise;

We can use the .then() method to specify what should happen when the Promise is resolved, and the .catch() method to specify what should happen when the Promise is rejected. In addition, we can also use the .finally() method to specify a callback that should be executed regardless of whether the Promise was resolved or rejected.

let amount = 10000;

let transaction = new Promise((resolve, reject) => {
  console.log("Trying transaction, for downpayment of amount $8000");

  if (amount - 8000 > 0) {
    resolve({
      message: "Successfully Approved!",
      balance: amount - 8000,
    });
  } else {
    reject({
      message: "Transaction Denied!",
      balance: amount,
    });
  }
});
transaction.then((response) => {
    console.log(response); // This will be executed, if the promise was resolved
}).catch((error) => {
    console.log(error); // This will be executed, if the promise was rejected
}).finally(() => {
    console.log("I will be executed anyway"); // I will be executed anyway
})

When we run the above codes, we can get the following result.

Trying transaction, for downpayment of amount $8000
▶︎{message: 'Successfully Approved!', balance: 2000}
I will be executed anyway
▶︎Promise {<fulfilled>: undefined}

When we change the amount to 5000, we can get the following result.

Trying transaction, for downpayment of amount $8000
▶︎{message: 'Transaction Denied!', balance: 5000}
I will be executed anyway
▶︎Promise {<fulfilled>: undefined}

Promise Chaining

Promise chaining is a technique used that involves chaining multiple asynchronous operations in a specific sequence using promises. It is used to simplify and organize asynchronous code that involves multiple steps, by connecting the output of one promise to the input of another.

let number = 20;

let getNumber = new Promise((resolve, reject) => {
  resolve(number);
  reject("Failed to get number");
});
getNumber
  .then((response) => {
    console.log(response, "MY 1st Time of Resolving!");
    return response * 5; // 100
  })
  .then((newResponse) => {
    // 100
    console.log(newResponse, "MY 2nd Time of Resolving!");
    return newResponse * 10; // 1000
  })
  .then((finalResponse) => {
    // 1000
    console.log(finalResponse, "MY final Time of Resolving!");
  })
  .then((anotherFinalResponse) => {
    console.log(anotherFinalResponse, "UHH LAST !"); // So here it will be undefined! Since I didn't return anything!
  });

Using the fetch() API

fetch() is a web API used in JavaScript to make asynchronous HTTP requests to a server and handle the response. It returns a Promise object that resolves to the Response object representing the response to the request made. The fetch() function can be used to send GET, POST, PUT, DELETE, and other types of HTTP requests.

.then() and .catch()

const fetchApi = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);
fetchApi
  .then((response) => {
    if (!response.ok) { //we are checking whether the network response is successful or not.
      console.log("Network response was not ok");
    }
    return response.json();
  })
  .then((finalOutput) => {
    console.log(finalOutput[0].name);
  })
  .catch((error) => {
    console.error("There was a problem with the fetch operation:", error);
  });

In this code, it is unnecessary to use new Promise() because the fetch() API itself returns a Promise that resolves to the Response object representing the network response. We then use the .then() method of the Promise returned by fetch() to specify a callback function that will be called when the network response is received. The first .then() block checks whether the network response was successful by checking the response.ok property. If the response is not ok, it logs an error message. If the response is ok, it returns the response data in JSON format by calling response.json().
The second .then() block receives the JSON data returned from the previous .then() block as an argument, and logs the name of the first product in the data.
The .catch() block is used to catch any errors that may occur during the fetch operation, and it logs an error message along with the error object.

async/await

async function fetchApiAsyncAwait() {
  try {
    const response = await fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json");
    if (!response.ok) {
      console.log("Network response was not ok");
    }
    const finalOutput = await response.json();
    console.log(finalOutput[0].name);
  } catch (error) {
    console.error("There was a problem with the fetch operation:", error);
  }
}

fetchApiAsyncAwait();

In this code, we define an async function fetchApiAsyncAwait that uses await to wait for the fetch request to complete and for the response to be converted to JSON. We also use a try/catch block to handle any errors that might occur during the fetch operation.

Promise.all

Promise.all is a method in JavaScript that takes an iterable of promises as input and returns a single Promise that resolves to an array of the results of the input promises. The returned Promise is fulfilled when all the input promises have been fulfilled or rejected if any of the input promises have been rejected.
If any of the promises is failing/rejected then the other resolved promises are ignored and it goes to the catch block.

.then() and .catch()

async function fetchApis() {
  try {
    const [api1Response, api2Response] = await Promise.all([
      fetch('https://api.example.com/api1'),
      fetch('https://api.example.com/api2')
    ]);

    if (!api1Response.ok) {
      throw new Error(`API 1 returned an error: ${api1Response.status}`);
    }
    if (!api2Response.ok) {
      throw new Error(`API 2 returned an error: ${api2Response.status}`);
    }

    const api1Data = await api1Response.json();
    const api2Data = await api2Response.json();

    console.log('API 1 data:', api1Data);
    console.log('API 2 data:', api2Data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

fetchApis();

async/await

function fetchApis() {
  Promise.all([
    fetch('https://api.example.com/api1'),
    fetch('https://api.example.com/api2')
  ])
  .then((responses) => {
    const [api1Response, api2Response] = responses;

    if (!api1Response.ok) {
      throw new Error(`API 1 returned an error: ${api1Response.status}`);
    }
    if (!api2Response.ok) {
      throw new Error(`API 2 returned an error: ${api2Response.status}`);
    }

    return Promise.all([api1Response.json(), api2Response.json()]);
  })
  .then((data) => {
    const [api1Data, api2Data] = data;

    console.log('API 1 data:', api1Data);
    console.log('API 2 data:', api2Data);
  })
  .catch((error) => {
    console.error('There was a problem with the fetch operation:', error);
  });
}

fetchApis();

Ten Basic Code Challenges in JavaScript

Yuki Kasugai — Fri, 18 Nov 2022 19:32:11 +0000

I tried ten basic code challenges to revise JavaScript. When I made Next.js app, I was struggling with showing the data from external API by using the map method in JavaScript. I thought that basic knowledge is important to write JavaScript code practically. I solved ten problems from this link.

1) Print all even numbers from 0 – 10
Try to make the solution to this problem as efficiently as possible. Consider using loops that would allow you to type the fewest characters/commands. While you could simply print the even numbers, get creative and see how you could output them in a way that would work up to 10 or even up to 10,000 with little extra effort.

// Pattern 1
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const printAllEvenNumbers1 = () => {
  for (let i = 1; i < number.length; i++) {
    if (number[i] % 2 === 0) {
      console.log(number[i]);
    }
  }
};
printAllEvenNumbers1(number);

// Pattern 2
const printAllEvenNumbers2 = (number) => {
  for (let i = 1; i <= number; i++) {
    if (i % 2 == 0) {
      console.log(i);
    }
  }
};
printAllEvenNumbers2(10);

// Pattern 1 & 2
2
4
6
8
10

2) Print a table containing multiplication tables
Let's start with the tables that many of us had to memorize in school. Can you print a table that contains all the answers to the multiplication tables from 1 through 10? Like Challenge #1, can you create an efficient solution that you could easily expand should you need the 12 times table?

const printMultiplicationTable = (number) => {
  for (let i = 1; i <= number; i++) {
    for (let j = 1; j <= number; j++) {
      console.log(i + "×" + j + "=" + i * j);
    }
  }
};

printMultiplicationTable(12);

'1×1=1'
'1×2=2'
'1×3=3'
   :
'12×10=120'
'12×11=132'
'12×12=144'

3) Create a length converter function
Creating a function is a skill that'll be useful in many settings, and as you progress, you'll be working on much more complicated functions than this one. But a function that converts units of measure can be pretty handy in multiple professions and industries. Let's start with a conversion from kilometers to miles. The function should include the input in kilometers and return the answer in miles.

const createLengthConverter = (kilometers) => {
  let result = kilometers / 1.609344;
  return kilometers + "km = " + result.toFixed(6) + " mile";
};

createLengthConverter(1);

'1km = 0.621371 mile'

4) Calculate the sum of numbers within an array
You can create your own array of numbers but consider trying this problem with a few different sets to verify your solution. Have one array with negative and positive numbers and another with integers and decimals. You could also try using arrays of different lengths. If you're feeling comfortable with this, try the slightly more challenging bonus challenge below. Bonus intermediate challenge: Create a function that can return the sum of a particular column or row number in a table.

let numbers = [-3, -2, -1, 1, 2, 3, 4, 5, 1.2];

const calculateSumOfNumbers = (array) => {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum = array[i] + sum;
  }
  return sum;
};

calculateSumOfNumbers(numbers);

10.2

5) Create a function that reverses an array
This challenge is particularly helpful if you're planning to become a Data Scientist. Manipulating data is a significant part of the role, and building the foundations now will help you later down the road when you're working with large databases. Start small here and work your way up. Begin with an array of 5 numbers, and then try your program with a larger array to verify its success.

// Pattern1
let numbers = [1, 2, 3, 4, 5];
const reverseArray1 = (array) => {
  let newNumbers = [];
  for (let i = array.length - 1; i >= 0; i--) {
    newNumbers.push(numbers[i]);
  }
  return newNumbers;
};

reverseArray1(numbers);

// Pattern2
let numbers = [1, 2, 3, 4, 5];

const reverseArray2 = (array) => {
  return array.reverse();
};

reverseArray2(numbers);

// Pattern 1 & 2
[ 5, 4, 3, 2, 1 ]

6) Sort an array from lowest to highest
You could create a function for this solution as well, but be sure to try your program with varying lengths and types of arrays. Try one with all integers, another with negative numbers, and another with decimals.

// Pattern1
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];
const sortArray1 = (array) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (array[j] > array[j + 1]) {
        let current = array[j];
        array[j] = array[j + 1];
        array[j + 1] = current;
      }
    }
  }
  return numbers;
};

sortArray1(numbers);

// Pattern2
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];

const sortArray2 = (array) => {
  return array.sort(compareNumbers);
};

const compareNumbers = (a, b) => {
  return a - b;
};

sortArray2(numbers);

// Pattern 1 & 2
[ -2, 1, 3, 3, 4, 5, 6, 10 ]

7) Create a function that filters out negative numbers
In this challenge, you'll have a function that takes an array as an input and returns an array. But if all goes according to plan, it'll remove the negative numbers. This is another example of a task that'll be useful when combing through data and looking for clever ways to eliminate "bad data."

// Pattern1
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];
const filterNegativeNumbers1 = (array) => {
  for (let i = 0; i < array.length; i++) {
    if (array[i] < 0) {
      array.splice(i, 1);
    }
  }
  return array;
};

filterNegativeNumbers1(numbers);

// Pattern2

let numbers = [3, -2, 5, 4, 10, 6, 3, 1];

const filterNegativeNumbers2 = (array) => {
  let result = array.filter(checkNegativeNumber);
  return result;
};

const checkNegativeNumber = (num) => {
  return num > 0;
};

filterNegativeNumbers2(numbers);

// Pattern 1 & 2
[ 3, 5, 4, 10, 6, 3, 1 ]

8) Remove the spaces found in a string
Yet another way to clean up data is to remove any errors or unnecessary spaces. This function will take in a string and then return it with all spaces removed. Think about if you were tasked with cleaning up customer data at your job. You could scale this function to clean up specific fields of data, such as zip codes.

let myName = "Yuki K asugai";
const removeSpace = (str) => {
  return str.replace(/\s/g, "");
};

removeSpace(myName);

'YukiKasugai'

9) Return a Boolean if a number is divisible by 10
Here, you'll create a function that'll give you a "true" or "false" Boolean as its output. The inputted number should only return a "true" if it's divisible by 10. Otherwise, your program should return a "false" answer.

const returnBoolean = (num) => {
  if (num % 10 === 0) {
    return true;
  } else {
    return false;
  }
};

returnBoolean(100);

true

10) Return the number of vowels in a string
Create a function that'll return an integer of the number of vowels found in a string. This is a great way to practice determining the features of a dataset. If you use JavaScript later in your career, you'll be well-prepared to determine what datasets (or just strings) consist of. If you feel like an extra challenge, consider returning the number of characters.

let word = "Good morning everyone!";
const numberOfVowels = (str) => {
  let count = 0;
  const vowels = ["a", "e", "i", "o", "u"];
  for (const element of str.toLowerCase()) {
    if (vowels.includes(element)) {
      count++;
    }
  }
  return count;
};

numberOfVowels(word);

After finishing these code challenges, I feel that there is a difference between understanding and writing JavaScript and I need to keep writing JavaScript code to not forget how to handle arrays, strings, and objects. As I said, I am creating Next.js app now but sometimes I have no idea how I write the code. Of course, I can search for the appropriate code on Google, but I am not sure if the problem I face is short of writing JavaScript code, short of writing JSX code, or short of knowledge about React and Next.js. I realized it is necessary to revise while I learn a new language again so I will keep to it.

How to Organize the Files in the Components Practically in React and Next.js.

Yuki Kasugai — Thu, 10 Nov 2022 20:09:38 +0000

Do you know what is the most practical way to organize the directories and files in the component directory? While I was creating my portfolio site, I am curious about those. I searched some React repositories on GitHub and also asked my developer's friends about those so I will show you guys three ways.

The following file composition is my portfolio site app.

|_components
    |_Herosection
        |_herosection.jsx
        |_herosection.modules.css
    |_Navbar
    |_button

|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx

I created each component directly under the component directory and then created each jsx file and css file in it. (I created my portfolio site by using Next.js) I searched open-source React and Next.js website repositories on GitHub and some of them are very similar. Let's see the Drift website's file composition.

Pattern1

|_components
    |_admin
    |_app
    |_auth
        |_auth.module.css
        |_index.tsx
    |_badges
    |_button-dropdown
      ・
　　　 ・
　　　 ・

This way has pros and cons.
pros; We can write the path of the file compactly when we use the component on each page file.

import Auth from "@components/auth"

cons; It will be in alphabetical order in the components directory. If the app has dozen of components, it takes a little time to look for those and we can not see which components are common or not.
Website URL
GitHub
I also asked my developer's friends and they shows two ways.

Pattern2

|_components
   |_commons
     |_navbar
       |_navbar.jsx
       |_navbar.modules.css  
   |_utilities
     |_button
       |_button.jsx
       |_button.modules.css
   |_Home_components
     |_herosection
       |_herosection.jsx
       |_herosection.modules.css
   |_Aboutme_components
   |_Products_components
   |_Articles_components

|_pages
   |_Home.jsx    
   |_Aboutme.jsx 
   |_Products.jsx 
   |_Articles.jsx

The utilities directory includes minimal components which I use on all pages. The commons directory has components that are mixed with a couple of minimal ones. In addition, each page directory has components by themselves. But some friends said that the definition between utilities and commons depends on the people. If you work with other members, it has the possibility to hover between those. Let's see another way.

Pattern3

|_commonComponents
    |_navbar
        |_navbar.jsx
        |_navbar.modules.css 
    |_button
        |_button.jsx
        |_button.modules.css

|_pageComponents
    |_Home_components
        |_herosection
            |_herosection.jsx
            |_herosection.modules.css
    |_Aboutme_components
    |_Products_components
    |_Articles_components

|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx

There are two main types of component directories. (So far, pattern 1 & 2 have just one component directory.) It enables us to write the path of the file compactly and team members will not be confused.

Therefore, I prefer pattern 3. It is important to have a clear file composition that everyone can understand when I work as a developer with other team members in the future. However, I'm still wondering if it is the best way so I really appreciate it if you suggest me more practical way in the comment field.

Can you explain SSR, SSG, and ISR in Next.js?

Yuki Kasugai — Fri, 04 Nov 2022 07:27:25 +0000

In Next.js, one of the important features is pre-rendering. On the way to understand what is pre-rendering, I also have to learn SSR, SSG, and ISR so I will write an article about those.

1. SSR (Server Side Rendering)

To understand SSR, we have to know the difference between CSR and SSR.
In CSR (Client Side Rendering), when a client makes an initial request, the server sends all file elements of a web page. Those are cached by the browser and then javascript runs on the browser to show the interactive page. React uses CSR but sometimes it is not useful because sending it and running takes a long time if the JavaScript file is so big.
In SSR (Server Side Rendering), on the other hand, when a client makes an initial request, the server sends a fully rendered page to the client. It does not need to send it and run so SSR is faster than CSR. In addition, it has good benefits for SEO.

2. SSG (Static Site Generation)

We can understand SSR is greater than CSR. However, even with server-side rendering, overhead is unavoidable since calculations are performed for each request from the client. To resolve that, there is SSG (Static Site Generation). In SSG, Rendering is done at the time of building the web application, and the HTML file for each page is generated at that time. When a client makes a request, it returns that HTML file. Even if the web page has data from external DB, API, and CMS, getting data is done at the build time. Especially, SSG is effective when placing a cache of HTML files on a CDN and returning the cache from a CDN close to each client. This architecture is called Jamstack. Jamstack websites are more secure because hackers can not access the server directly. Moreover, it can handle the crush of demand because it just returns HTML files when a client makes a request.

According to Vercel, SSR and SSG are called pre-rendering.

Two forms of Pre-rendering
Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

-Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.

-Server-side Rendering: The HTML is generated on each request.

3. ISR (Incremental Static Regeneration)

SSG does not depend on the client's request because HTML for each page and the attached data were generated in ahead. However, there is a problem we can not get the latest external data if the data change at the data source after the build time. To solve this, Here is ISR (Incremental static regeneration). In ISR, it has a function of regenerating HTML by re-fetching data and re-rendering the page in the background at regular intervals in addition to the behavior of SSG explained so far.

Nowadays, Next.js is popular among Front-End Developers because SSR, SSG, and ISR enable users to provide better UI than React.

reference link1
reference link2
reference link3

What's So Great About Virtual Dom in React?

Yuki Kasugai — Thu, 20 Oct 2022 20:19:01 +0000

Nowadays, React is popular among Front-end developers. There are tons of reasons why they prefer React. One of those is the concept of Virtual Dom. I learned what is the virtual DOM so I am going to write it.
Before React appears, web documents like HTML are loaded in web browsers to show users. They have tree-like structures.

When we would like to update something different, DOM (Document Object Model) works. This word is a little bit difficult for me so I think that Dom is an office to access each tag like head, title, body, header, nav, main, p, and div.
In JavaScript, If we want to change an element of div tag, we get div DOM and give it something different, and then the page has to re-render. In this way, DOM is changed directly and processed in the web browser. This process leads to being overloaded and the cost of re-rendering is high.
However, React can solve these problems because it uses the concept of a virtual DOM. React creates a virtual DOM to keep in memory whenever we render the user interface. If the next update occurs in the render, it compares the new version with the previous version and figures out the difference and the real DOM only changed the different points. It is called reconciliation. The updating is processed in the JavaScript engine and this process is implemented efficiently. The cost of re-rendering is low. Users also can see web pages more quickly than before.

According to this link, we can understand how virtual DOM works easily.

In summary, here’s what happens when you try to update the DOM in React:

The entire virtual DOM gets updated.

The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.

The changed objects, and the changed objects only, get updated on the real DOM.

Changes on the real DOM cause the screen to change.

The Virtual DOM enables pages to re-render productively. That's why React becomes more and more mainstream among Front-end web developers.

What is the Good Point about Influencer’s Websites

Yuki Kasugai — Fri, 14 Oct 2022 19:01:52 +0000

I'm going to create my portfolio website. Before doing that, I checked the influencers' websites. I will write what they have in common.

The below link is my reference websites

Cassidy Williams
https://cassidoo.co/
Jhey Tompkins
https://jhey.dev/
Jason Lengstorf
https://www.jason.af/
Sara Soueidan
https://www.sarasoueidan.com/
RACH SMITH
https://rachsmith.com/

Simple is Best

The contents of their websites are self-introduction, career histories, products, and contacts. They minimize their information to appeal so they have a few pages. Viewers can see their websites with as few clicks as possible. It enables viewers to see who they are and what kinds of skills they have easily. In terms of design, their background colors are simple like white, cream-yellow, and light gray. The line colors are mainly black. Then a point color or an animation is used as a decorative accent. Less information and less decoration give viewers comfortable feelings.

White space and Alignment

They make efficient use of white space and alignment. White space and alignment emphasize information. If you check Cassidy William's website, you can understand what I said. Her main page has the main contents situated in the middle and There is much white space outside of that. The contents have no outline but the alignment of the text gives us the impression it has an outline.

Playful

The purpose of creating portfolio websites is to appeal their skills to potential clients and the company’s recruiters who are hiring however, they also do not forget appealing their sense of fun. Please check Jason Lengstorf's website. On the upper right, you can see his face. If you click his head, the brain appears and we can see his website's content. This kind of playful mind offers great entertainment for views and we have a desire to know more about him.

Responsive and Dark mode

Of course, All influencers' websites that I checked are responsive so viewers can see websites via laptop, tablet, and smartphone perfectly. In addition, two-thirds of those have a dark mode button. For web developers who are used to dark mode while they are writing codes, it is getting more common.

What are "Scope" and "This" Keyword in JavaScript?

Yuki Kasugai — Thu, 06 Oct 2022 03:39:10 +0000

What is "scope"?

The scope is the area in code from where a variable can be accessed.
In JavaScript, there are two types of scope: Global scope and Local scope. Local Scope can be further divided into two types of scope: Function scope and Block scope.

Global Scope;

Global variables are those declared outside of a block {}
Local Scope;

Local variables are those declared inside of a block {}
- Function Scope
- Block Scope

Global Scope

Global variables are those declared outside of a block {}.

In JavaScript, it is necessary that all codes are stored in the object and the object which is at the top of the hierarchy is the global object. Declaring a variable in Global Scope means that a property is attached to the global object. JavaScript runs on the web browser so the window object could be the global object.

var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname1 (){
  console.log(a);
  console.log(b);
  console.log(c);
}
callMyname1();

'Yuki'
'Kasugai'
'Japan'

I tried to see properties in the window object (= Declaring variables in Global Scope) then, but I can only access var variable.

var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname2 (){
  console.log(window.a);
  console.log(window.b);
  console.log(window.c);
}
callMyname2();

'Yuki'
undefined
undefined

It means that var is globally scoped and attached to the window object, on the other hand, let and const are globally scoped but not attached to the window object.

Local Scope

Local variables are those declared inside of a block {}. It can be further divided into two types of scope: Function scope and Block scope.

Function Scope

In the following code, Both 3 variables:var let const and each console.log are declared inside of a block {}. I can access 3 variables.

function callMyname3 (){
  var d = 'Yuki';
  let e = 'Kasugai';
  const f = 'Japan';
  console.log(d);
  console.log(e);
  console.log(f);
}
callMyname3();

'Yuki'
'Kasugai'
'Japan'

Block Scope

In the following code, 3 variables var let const are declared in a curly brace {} which is inside of a block{}, and each console.log is outside of a curly brace which is inside of a block{}. Then, I can only access var variable.

function callMyname4 (){
  if(true){
    var g = 'Yuki';
    let h = 'Kasugai';
    const i = 'Japan';
  }
  console.log(g);
  console.log(h);
  console.log(i);
}
callMyname4();

'Yuki'

It means that var variable is a Function scope and let and const variable are Block scope.
I tried to write console.log(j) outside of a block{}(= outside of the function) then I can not access it for sure.

function callMyname5 (){
  if(true){
    var j = 'Yuki';
    let k = 'Kasugai';
    const l = 'Japan';
  }
}
console.log(j);
callMyname5();

ReferenceError: j is not defined

I summarized those topics in a table.

Keyword	Scope	Hoisting	Can be reassigned	Can be redeclared
var	Globally scoped & Function Scope	Yes	Yes	Yes
let	Globally scoped & Block Scope	No	Yes	No
const	Globally scoped & Block Scope	No	No	No

reference link1

What is "this" keyword?

In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used
By W3schools

Alone

On global level, the keyword 'this' refers to global window object.
First, I write console.log(this) on global scope in the following code, then the result refers to window object.

console.log(this);

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

In a function

Next, I write console.log(this) in a function, then the result refers to window object as well.

function test(){
  console.log(this);
}

test();

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

In an object

In addition, I assign this to a property(name) in an object(myObject1), and the result also refers to window object.

var myObject1 = {
  name: this,
}

console.log(myObject1.name);

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

In a method

Lastly, I write console.log(this) in a method(myFunc) of an object(myObject2). Then, the result refers to a function (myObject2).

var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.myFunc();

{name: Window, myFunc: ƒ}

Even if I add a method(age) later, the result refers to a function (myObject2).

var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.age = function(){
  console.log(this);
}
myObject2.age();

{name: Window, myFunc: ƒ, age: ƒ}

In a constructor function using the new operator

Moreover, we have to remember if we use constructor function using the new operator, the result refers to the first function(myFirstObject). It means that this in the constructor function refers to the first function(myFirstObject).

function myFirstObject(name,id){
  this.name = name;
  this.id = id;
  }

var mySecondObject = new myFirstObject("yuki",100);

console.log(mySecondObject);

myFirstObject {name: 'yuki', id: 100}

reference link2
reference link3

Top 5 Practical Array Methods in JavaScript

Yuki Kasugai — Wed, 28 Sep 2022 19:25:48 +0000

forEach()

The forEach() method executes a provided function for each array element.

const numbers = [1,2,3,4,5];

numbers.forEach(element => {
  console.log(element + 10);
});

The forEach just does execute the same function for each element of an array. It does not return anything. If we try to do the console.log(resultForEach) in the following code, undefined appears.

const numbers = [1,2,3,4,5];

const resultForEach = numbers.forEach(element => {
  return element * 10;
});

console.log(resultForEach);

undefined

Reference link1

Map()

The map() method creates a new array with the results of calling a function for every array element.

const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  console.log(element + 10);
});

The map() method shows us the same result as the forEach() method. But the return value appears if we try to do the console.log(resultMap) in the following code. It has a return value and can generate a new array. This is the big difference between the map() method and the forEach() method.

const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  return element + 10;
});
console.log(resultMap);

[ 11, 12, 13, 14, 15 ]

Reference link2

Filter()

The filter() method returns a new array with all elements that pass the test defined by the given function.

const numbers = [1,2,3,4,5];

numbers.filter( element => {
  if (element % 2 == 0){
    return true;
  }
  else{
    return false;
  }
});

[ 2, 4 ]

The filter() method also can generate a new array that consists of only the element which satisfies a given condition.
Reference link3

Every() & Some()

Every()

The JavaScript Array every() method checks if all the array elements pass the given test function.

const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element <= 5;
} );

console.log(resultEvery);

true

const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element % 2 == 0;
} );

console.log(resultEvery);

false

Some()

The some() method tests whether any of the array elements pass the given test function.

const numbers = [1,2,3,4,5];


const resultSome = numbers.some( element => {
  return element % 2 == 0;
} );

console.log(resultSome);

true

We should remember the every() method and the some() method as a set. The every() method requires that all elements meet the condition, on the other hand, some() method needs at least one element meets the condition. I wrote the same condition for every() method and the some() method but the results were different.
Reference link4
Reference link5

Reduce()

The reduce() method executes a reducer function on each element of the array and returns a single output value.

const numbers = [1,2,3,4,5];

const resultReduce = numbers.reduce((accumulator,currentValue,currentIndex,array) => {
  return accumulator + currentValue;
});

console.log(resultReduce);

The reduce() method is more tricky than others. It can have 4 parameters. (we can skip writing currentIndex and array) It returns not a new array but one value.

Word	Meaning
accumulator	initial value or the previous result which was being executed
currentValue	the value which is being executed right now
currentIndex	the index which is being executed right now
array	array which is provided ahead

If initialValue is specified,
- accumulator = initialValue
- currentValue = the first element of the array
If initialValue is omitted,
- the accumulator = the first element of the array
- currentValue = the second element of the array

I am going to write what happens in the above code.

How many times	accumulator	currentValue	currentIndex
1st	1	2	1
2nd	3	3	2
3rd	6	4	3
4th	10	5	4

Reference link6
Reference link7

Top 5 confusing things about JavaScript while I learned it for the first time

Yuki Kasugai — Thu, 22 Sep 2022 19:14:33 +0000

1. The difference between `return` and `calling the function`

While studying functions, I was confused about the difference between return and calling the function. But I was able to understand after I likened the function to a practical example in our daily lives.
I would like to make a cup of café latte. There are two machines. One is an espresso machine and another is a steamed milk machine.

☕️ Espresso machine is the first function.

Coffee beans are the parameter.
Espresso is the return. -Calling the function is the action I turn on the button of the espresso machine.

🥛 Steamed milk machine is the second function.

Cold milk is the parameter.
Steamed milk is the return.
Calling the function is the action I turn on the button of the steamed milk machine.

In order to make a cup of café latte, I turned on an espresso machine (=calling the first function) and I got the espresso (=return). Then, I turned on the steamed milk machine(=calling the second function) and used the espresso (=return) to mix with steamed milk(=return).
If I didn’t have the espresso, I can not mix it with steamed milk so I can not make a cup of café latte, even if I turn on the steamed milk machine.
This is the way I understand the difference between those.

2. The difference between `return` and `console.log`

After I understood the difference between return and calling the function, I also got confused about the difference between "return and console.log. Because my teacher said if you make the function, you always should write return, however, sometimes, I do not need to write it instead of console.log, so I thought that both have the same role. Then, I tried to write the following code to compare the difference.

1st try

I wrote the following code. If I commented out return c;, the result is the same.

function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  sum();

2nd try

I wrote the following code. If I commented out return c;, the result was changed and it's starting to make sense.

function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  let d = sum();
  console.log("test b is " + d);

In the console

test a is 5
test b is 5

In the console (commented out return c;)

test a is 5
test b is undefined

return c; is crucial in this code because it specifies a value to be returned to the function caller. As you can see, If omitted, undefined is returned instead. console.log will not influence the flow of the code, on the other hand, return values will cause reactions there.

Reference link1

3. Two types of Array

While I learned about array, I god that it has multiple ways to write. At first, it was challenging to distinguish those differences.

ⅰ. Array of objects

[{},{},{},{}]

Here, we store objects because we want similar types of value. Objects store properties for particular entities.
For example; Student

let studentsRecords = [
    {
      name: "John",
      rollNumber: 100,
    },
    {
      name: "Bob",
      rollNumber: 101,
    },
    {
      name: "Nick",
      rollNumber: 102,
    },
  ];
  console.table(studentsRecords);

ⅱ. Nested array

[[],[],[],[]]

On the other hand, here we have array inside another array. There is no direct relation between array and it has no properties.

let nums = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];
console.table(nums);

At the moment, I can not imagine the practical situation, but the purpose is different, and most of the time, we use Array of objects.
Reference link2

4. For Loop vs While Loop

I'm also confused about these differences because the following code shows the same result.

ⅰ. For Loop

for(let count = 0; count <=5; count++){
    console.log(count);
}

ⅱ. While Loop

let i = 0;
while(i <= 5){
    console.log(i);
    i++;
}

According to one website,

For Loop: A for loop is an iteration method that is best used when you know the number of iterations ahead of time. It’s always followed by the initialization, expression and increment statements.
While Loop: A while loop is an iteration method that is best used when you don't know the number of iterations ahead of time. The contents of the loop are executed as long as the expression evaluates to true.

After I imagine practical examples in my daily life, It's starting to make sense.
I'm in the grocery store to buy tons of apples. 🍎
When I wanna know the cost of 100 apples, I use For Loop because I know the number of iterations ahead of time. On the other hand, when I wanna know the number of apples if I will pay 1000 dollars, I use While Loop because I don't know the number of iterations ahead of time. This is the way how do I pick between the two.
Reference link3
Reference link4

5. Loop with Array

When I use For Loop with Array, I have no idea about the meaning of this syntax.

let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];

for(let i = 0; i < fruitsArray.length; i++){
    console.log(fruitsArray[i]);

I got confused about which statement points to index or length so I wrote detail and tried to think one by one.

        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) < fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);

In the console

i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"

I changed < to <= and the result was changed.

        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) <= fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);
}

In the console

i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"
i = 4, Undefined