Forem: Mertcan KOÇER

Custom Hooks - useDebounce()

Mertcan KOÇER — Mon, 27 Feb 2023 18:01:33 +0000

Hi everyone,

Today's hook is debouncing. But before I tell you about this hook, let me explain what debouncing is.

What is Debouncing?

As you know, we love to use fancy words in computer world. One of them is debouncing.

Imagine that you have a user table in database that contains a large amount of data, and you want to display these users in your react application and also be able to search on it.

But the search action takes too long. That's why you don't want to send every input of the user as a request. What solution can you provide? We have 3 solutions as below.

1. Sending data when it reaches a certain length

But what if the length of our smallest meaningful data is one character? Or, are we going to request every character input after the threshold value we set? Of course no!

2. Using button to send data

Yes, I think the same as you 🙂 Definitely, this is a solution but we can not provide the necessary feedback instantly. It's like we are using a technology from decades ago, not React. Let's do better things now!

3. Send data when the data entry is complete

In fact, we understand what debounce means in this example. We offer the user the opportunity to enter the desired word. If the user has not entered for a certain period of time, we send the request to our backend. This time is in your hands, but if you optimize it, you will have a great balance between the user experience and the number of requests to the server.

Implementing useDebounce Hook

import { useEffect, useState } from "react";

// Part 1
const useDebounce = <T>(value: T, delay?: number): T => {
  // Part 2
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  // Part 3
  useEffect(() => {
    // Part 4
    const timeout = setTimeout(() => setDebouncedValue(value), delay || 500);

    // Part 5
    return () => {
      clearTimeout(timeout);
    };
  }, [value, delay]);

  // Part 5
  return debouncedValue;
};

// Part 6
export default useDebounce;

Explanations

Part 1
We name our function using the use....() pattern and take the necessary arguments. The argument we receive here specifies the value as a generic argument so that you can use any kind of type here. Second argument is the delay amount that we talked about in the previous parts.

Part 2
We need to manage state internally in our hook. To do so, we used useState() hook.

Part 3
If the function's arguments change, the function should run again. That's why we use the useEffect builtin hook.

Part 4
By creating a timeout we will provide the required amount of wait. At the end of this period, we will update our state.

Part 5
The useEffect hook allows us to return a function that is used to run when component is unmounted. In this way, we prevent memory leaks by clearing our timeout when the component is unmounted.

Part 6
Exporting our custom hook.

Usage

Using the code below you can track the changes and enjoy your debounced value!

import React, { ChangeEvent, useState } from "react";
import { useDebounce } from "./hooks";

function App() {
  const [instantValue, setInstantValue] = useState<string>();
  const debouncedValue = useDebounce(instantValue, 500);

  return (
    <div>
      <input
        onChange={(e: ChangeEvent<HTMLInputElement>) =>
          setInstantValue(e.target.value)
        }
      />
      <p>Value: {instantValue}</p>
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}

export default App;

Custom Hooks - useToggle()

Mertcan KOÇER — Sun, 26 Feb 2023 23:12:19 +0000

Hello everyone,

Today I am here to explain you to another custom hook, useToggle. We will continue with this hook as the second step in our Custom Hook adventure. It is a pretty simple hook. 🙂

So what's the point of this hook?

As you know, sometimes there are only values that we toggle. For example, the best example of this is sidebar status, whether the sidebar is opened or closed.

We want to know the instant status of the sidebar, but instead of assigning a boolean value directly to it, we want to toggle it.

In these cases, the useToggle custom hook comes to our aid. If we implement this hook, we can use it in such situations very easily. Below you can see the file structure I prepared for this hook and the implementation.

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

// Part 1
const useToggle = (initialState: boolean = false) => {
  // Part 2
  const [state, setState] = useState(initialState);

  // Part 3
  const toggle = useCallback(() => setState((state) => !state), []);

  // Part 4
  return [state, toggle] as const;
};

// Part 5
export default useToggle;

Explanations

Part 1
We name our function using the use....() pattern and take the necessary arguments. The argument we receive here specifies the initial state of toggle status.

Part 2
We need to manage state internally in our hook. To do so, we used useState() hook.

Part 3
Here we create the function that will provide the toggle operation. In this way, the person who will use the function will be able to switch between values with this function.

In case of passing components down, we should prevent unnecessary function redefinition with pre-defined useCallback hook.

Part 4
Just like the return value of the useState function, we return our state and toggle function as an array.

If you're using typescript just like me, you're probably wondering about the as const expression.

Since Typescript uses the union structure in values that we return as an array, it is quite natural to get an error. That's why we avoid type inference by spelling as const. You can get detailed information about this subject by clicking this link.

Part 5
Exporting that hook as a default export.

Usage

We explained everything clearly. Now the rest is using this hook in our source code. Below is the example App.tsx file.

import React from "react";
import { useToggle } from "./hooks";

function App() {
  const [isSidebarOpen, toggleSidebar] = useToggle();

  return (
    <div>
      <button onClick={toggleSidebar}>
        {isSidebarOpen ? "Toggled" : "Click to Toggle"}
      </button>
    </div>
  );
}

export default App;

Custom Hooks - useTime()

Mertcan KOÇER — Sun, 26 Feb 2023 21:53:26 +0000

Hi everyone,

Today I come to you with an example of one of the most difficult processes in React: Creating your own hook!

I decided to start with an easy example first. Therefore, we will create a hook called useTime() with you. Let's get started!

I'm starting by assuming you have created your React project because I don't want to take your time for it.

First, we can create a directory called hooks to keep our code organized. Then we have to create the required files here: useTime.ts and index.ts.

Since I use React with Typescript language, the extension of my files appears as .ts and the content is written in the typescript language.

Also, one of the important things to mention is the naming convention for custom hooks. Your hook function must have a name that will follow the use....() pattern. Otherwise, you will not be able to use the built-in React hooks in an external file and you will encounter an error like the one below.

Line 4:41: React Hook "useState" is called in function "donotuseTime" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

After this part, your file structure and code should be as follows.

/* Initial file content */
const useTime = () => {};

export default useTime

How to implement useTime() hook?

First of all, I want to talk about the purpose of this custom hook. Let's say you want to access the time object instantly anywhere in your application and show the time on the screen. In this case, you can get a perfect abstraction using the useTime hook.

We will use 2 built in react hooks to implement this hook:

useState
useEffect

You can see the whole implementation and explanations of each part below.

Implementation

import { useEffect, useState } from "react";

// Part 1
const useTime = (refreshPeriod: number = 1000) => {
  const [currentTime, setCurrentTime] = useState<Date>();

  // Part 2
  useEffect(() => {
    // Part 3
    const interval = setInterval(
      () => setCurrentTime(new Date()),
      refreshPeriod
    );
    // Part 4
    return () => clearInterval(interval);
  }, [refreshPeriod]);

  // Part 5
  return currentTime;
};

// Part 6
export default useTime;

Explanations

Part 1
We name our function using the use....() pattern and take the necessary arguments. The argument we receive here specifies how many milliseconds our function will run, namely the refresh period.

Part 2
Here, we use the useEffect hook to make a function run when certain parameters change. The parameter we get here is the refreshPeriod parameter. If there is a change in this parameter, the function we specified will work again.

Part 3
With the setInterval function, we define a function that is called continuously at certain time intervals. Here we define the interval as the refresh period value that we take as a parameter.

Part 4
The useEffect function allows us to return a function that is used to run when component is unmounted. In this way, we prevent memory leaks by clearing our interval when the component is unmounted.

Part 5
We specify how to return a value when the useTime hook is used. In this way, the returned value becomes the state that we defined it and update it at certain intervals.

Part 6
Exporting that hook as a default export.

Usage

We explained everything clearly. Now the rest is using this hook in our source code. Below is the App.tsx file. When we use it as shown in this file, we should see the result shown below.

import React from "react";
import { useTime } from "./hooks";

function App() {
  const time = useTime();

  return <div>{time?.toString()}</div>;
}

export default App;

React JS - Stateful vs Presentational Components

Mertcan KOÇER — Mon, 18 Apr 2022 16:32:51 +0000

Today we will talk about the types of components, which are the basic structures of the React library. But before moving on to our topic, we will briefly talk about the concepts of component and state.

What is Component?

Components are the basic building blocks of developing a React application. In technical terms, these structures are just JavaScript functions or classes. They accept various inputs which are called props in the React ecosystem. These functions or classes eventually return code blocks of type JSX. In this way, React allows us to create what we want on the screen.

What is State?

States are simply JavaScript objects but their use in the React ecosystem differs from traditional ones. React uses states to show the current situation of components and manages itself unlike normal variables or objects. Although states are similar to props, they are different and can only be managed by the component they belong to.

So, What are Stateful and Presentational Components?

As we mentioned, components are the basic building blocks provided to us to create a React application. However, it is possible to distinguish these building blocks into two parts according to their usage.

If a component is only responsible for the display and styling of the data on the screen, these components are called Presentational Component. Such components do not store any data in themselves and therefore do not contain any state.

If the component is responsible for managing some data, removing side effects, and contains states, this component is called a Stateful Component.