DEV Community: Shin-Young Jung

Improving UX by using cache

Shin-Young Jung — Tue, 30 Jan 2024 07:35:46 +0000

Problem

Let's say that there are two buttons. When users click each button, the button leads users to "page1" and "page2".

While switching from one page to another, there are some loading state that waiting for the API responses. This may make users feel that the service is not fast enough and buggy.

If there are data that we can use to preload while fetching new data from the server, users may think that the service is very responsive and fast.

Tanstack Query

Tanstack Query (a.k.a. React Query) provides many productive functions including cache management. When we use useQuery function to fetch API, it store the cache and use it when users come back to the page, and refresh the data asynchronously. Thus, if we don't want users to wait for the new data while switching pages, somehow data should be cached before switch pages.

Prefetch data

Tanstack Query provides the function called prefetchQuery, and we can use this to pre-cache the data. This is how we can use it.

// The results of this query will be cached like a normal query
queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

Please note that the queryKey should be the same as what actual API fetch will use in useQuery.

This is great! However, because we prefetch all the data that may not be reached by users (Users may see the single page and leave the service), the service may do over fetch the data from the server. Thus, when we use the prefetchQuery, please consider what's the better options, overfetch or waiting for the page update.

How to use multiple refs for an array of elements with React Hooks

Shin-Young Jung — Thu, 11 Jan 2024 13:49:15 +0000

Single reference

A simple <input/> element looks like:

JSX

import { useEffect, useRef, useState } from react;

const SimpleInput = () => {

    const inputRef = useRef(null);

    useEffect( () => {

        inputRef.current.focus();

    }, []);

    return(
        <div className = 'Input'>
            <input ref = {inputRef} placeholder = 'Name'></input></div>);

}

export default SimpleInput;

The <input/> will focus after DOM is loaded. If you execute console.log(inputRef):

JSX

{current: input}

inputRef is an object with a single current property.

Multiple references

But what would happen with an undetermined array of <input/>?

We need to define inputRef as an array, so that current property becomes an array as well.

JSX

import { useEffect, useRef, useState } from react;

const ArrayInputs = () => {

    // The number of references is undetermined
    // After fetching data, we can determine array's length
    const inputRef = useRef([]);

    // Data is empty before fetching
    const [data, setData] = useState([]);

    useEffect( () => {

        // We will fetch data and receive an array
        // let data = fetchData();
        // To simplify, let's suppose that the array is:
        let data = ['Name', 'Age', 'Gender'];

        // We define the size of array after receiving the data
        inputRef.current = new Array(data.length);

        // We set state
        setData(data);

    }, []);

    useEffect( () => {

        // If data is filled -> focus
        if(data.length !== 0) {

            // Focusing the last <input></input>
            inputRef.current[data.length - 1].focus();

        }

    }, [data]);

    return(

        <div className = 'Inputs'>
            {data.map((element, i) => <input ref = {el => inputRef.current[i] = el} placeholder = {element}></input>)}
        </div>

    );

}

export default ArrayInputs;

The last <input/> will focus after DOM is loaded.

If you execute console.log(inputRef):

JSX

{current: [input, input, input]}

Now, inputRef is an object with an array as current property. We can access to a single reference by writing inputRef.current[i].

CSS @supports

Shin-Young Jung — Wed, 10 Jan 2024 07:38:18 +0000

Nowadays when we implement web service, we need to consider the browser compatibility including desktop and mobile devices'.

Among the mordern major browsers, Safari is a bit different than other browsers. If something is not working, most of the time it's because Safari doesn't support it. Safari in mobile device is another story. It's different from the desktop Safari browser. It's not just about CSS style, but Web APIs as well.
In this article, we want to introduce CSS function called @supports so that we can handle the browser compatibility issue.

The way of using it is simple enough. For example, The mobile Safari browser version 14 doesn't support the unit svh and svw. Thus, we can check if the browser supports these units and if not, we can let the browsers use alternative that we define in the style.

.container {
  width: 100svw;
  height: 100svh;
}
@supports not(width: 100svw) {
  width: 100%;
  height: 100%
}

In my case, I used gap in style, but it is not supported from the old Safari browser, so I used SCSS's mixin to create a function using @supports to use in the style sheet instead of using gap.

@mixin row-gap($num) {
  row-gap: $num;
  // translate and gap seems to have the same level of
  // support so instead of using gap, I used translate since
  // it's working properly.
  @supports (not (translate: none)) {
    & > :not(:last-child) {
      margin-right: $num;
    }
  }
}

Please note that & > :not(:last-child) should be defined to replace the gap function. > sign allows to apply the gap only to the direct descendants, and :not(:last-child) allows to apply the margin between elements.

To use the above mixin, we should import it from the style file and use it instead of using row-gap.

.container {
  @includes column-gap(16px);
}

[Personal Log] iOS Safari Error: React App

Shin-Young Jung — Wed, 10 Jan 2024 07:04:42 +0000

While implementing mobile supported web application, I ran into The object can not be found here. error from iOS Safari during testing.

In Desktop web browsers and other browsers in the mobile works fine.

My code looked like followings.


return <div>
    {state === 'LOADING' && <div>Loading</div>}
    {
      type === 'youtube' ? <iframe ... /> : <video ... />
    }
  </div>

This code is pretty simple. It just display the loading during the loading state, and disappears when the data is loaded. However, somehow iOS Safari doesn't like it.

I kept getting the same errors over and over, and eventually I fixed this issue by adding another div wrapper.

return <div>
        {state === 'LOADING' && <div>Loading</div>}
         <div>
           { type === 'youtube' ? 
              <iframe ... /> : <video ... />
           }
         </div>
       </div>

I don't exactly understand what's going on, but I'll find out soon..

React: How to support multi-language service (Internationalization)

Shin-Young Jung — Fri, 22 Dec 2023 03:47:41 +0000

To support multi-language, we can use i18next and react-18next libraries.

Basic Setup

internationalization.ts

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  // i18next-http-backend
  // loads translations from your server
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    fallbackLng: 'en',
    detection: {
      lookupLocalStorage: 'iws_lang',
    },
    interpolation: {
      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    },
    debug: false,
  });

export default i18n;

How To Use

We can simply import internationalization in the App.tsx, and locate translation.json file in the /public/locales/{language_code}, where country_code is iso short (6391) country code such as en, ko, etc.

And then, in the component, we can import useTranslation hooks.

import { useTranslation } from 'react--i18next';

in the functional component,

const { t } = useTranslation();

return <div>{t('greeting.hello')}</div>

Please make sure that the translation.json should have the defined string in the following structure.

{
  "greeting": {
    "hello": "good morning! hello hi!"
  }
}
You can also use variables in the translation.json.



{
  "greeting": {
    "hello": "hi, {{name}}!"
  }
}

And then, in the component,

<div>{t('greeting.hello', { name: 'Jim' })}</div>

and this results

hi, Jim!

Change Language Preference

You can change the language dynamically in the App.

import { useTranslation } from 'react-i18next';

and in the component

const { i18n } = useTranslation();

and then, put the language code that you want to switch to.

ex) i18n.changeLanguage('ko');

Manual Fetch with Tanstack Query

Shin-Young Jung — Thu, 21 Dec 2023 01:40:52 +0000

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. - TanStack Query Overview

As a developer, TanStak Query is very efficient tool that handle all our needs when we fetch the data through APIs.

Very often we want to fetch the query manually not from useEffect or automatic fetching when entering the page.

To achieve this manual query, we can use QueryClient.

As all of you know, we already define the QueryClient to use the TanStack Query in our service.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return <QueryClientProvider client={queryClient}>
    <Main />
  </QueryClientProvider>

}

If you want to use the queryClient that you define above, you can simply use the hook called useQueryClient in your code.

import { useQueryClient } from '@tanstack/react-query';

export default function Main() {
  const queryClient = useQueryClient();
  ...
}

And then, you can use the function called fetchQuery. fetchQuery works exactly like useQuery, so we can add queryKey, queryFn, and other options that useQuery uses. (See the available options from the official documentation.

Here is an example.


const handleClick = async () => {
  try {
    // data will be the response of the fetch
    const data = await queryClient.fetchQuery({
        queryKey: ['fetch-data'],
        queryFn: functionForFetch(),
      });
  } catch (e){
    // handling error...
  }
};

<button onClick={handleClick}>Fetch</button>

ERROR: A blank page appears after deploying your Vite React App

Shin-Young Jung — Wed, 20 Dec 2023 07:47:36 +0000

After deploying your React App built with Vite, you may see the console error message says, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". ....

This is because you may set the wrong base while you set the vite.config.js/ts file.

I faced this issue when I set the path alias from the vite.config.ts file. I set the base with ./, but it gives an error when loading files from the html. the base path should be /, not ./.

So If you have any issues with the error message above please check your vite.config.ts file.

You can also set the base path from the script in the package.json. Please ensure your base path is set correctly in your script as well.

The way to set the base path from the script is as follows.
vite build --base=/.

Using Context APIs: Avoid Prop drilling and Manage States in React

Shin-Young Jung — Fri, 17 Nov 2023 15:05:52 +0000

To manage state in React, we can use 3rd party libraries such as Redux, Mobx, Zustand, etc. These libraries provide not just a state management function, but also other optimized solutions such as caching, etc. These libraries allow avoiding a specific problem that we call Prop drilling.

As we all know, React also provides such a solution called Context APIs.

This article shares an effective way of using Context APIs in your React project. Please note that this article doesn't explain the detail of how to use Context APIs. To understand the basic concept, please refer to the React official document createContext

Suggested Folder Structure

src
├── contexts
│   └── user
│       ├── userContext.tsx
│       └── userProvider.tsx
├── ...

userContext.tsx

import { createContext } from 'react';

interface IUserContext {
  name: string;
  setName: React.Dispatch<React.SetStateAction<string>>;
}

const UserContext = 
      createContext<IPersonContext>({} as IPersonContext);

export default PersonContext;

In the userContext.tsx, we can use createContext to create and define the context value that can be shared to child components.

As we all know, to use the context's value, we need to use provider and consumer something like as follows.

return <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>

<ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
</ThemeContext.Consumer>

However, it is tedious that we have to pass the value to the Provider whenever we use it and define the Consumer to get the value. This looks ugly and hard to read!

To make code clean and neat (also take a single responsibility), we can create a Higher Order Component with Context Provider.

userProvider.tsx

import { ReactElement, useMemo, useState } from 'react';
import UserContext from './userContext';

type UserProviderProps = {
  children: ReactElement;
};

export default function UserProvider({ children }: UserProviderProps) {
  const [name, setName] = useState<string>('');

  const value = useMemo(
    () => ({
      name,
      setName,
    }),
    [name]
  );

  return <PersonContext.Provider value={value}>{children}</PersonContext.Provider>;
}

As described in the code above, UserProvider includes the context value, and the value includes multiple props within a single object. To avoid unnecessary rerendering occurs, we wrap the value with useMemo. (Please note that the dependency for the memoization is name only because setName won't be affected by other changes.

How To Use

We need to define the context boundary by using UserProvider.

import UserProvider from './userProvider';
import Account from './Account';

export default function App() {

  return <UserProvider>
           <Account />
         </UserProvider>;
}

In the Account component, we can use useContext to get the context value.

Account.tsx

import { useContext } from 'react';
import UserContext from './userContext";

export default function Account () {
  const {name, setName} = useContext(UserContext);

  return <div>
           <div>
              Name: {name}
           <div>
           <input type="text" 
                  onChange={(e) => {
                              setName(e.target.value);
                            }
                           }/>
        </div>
}

Now, we can use this pattern to create multiple contexts and use them in any child components whenever they are needed!

React Hook: check outside click

Shin-Young Jung — Thu, 16 Nov 2023 13:33:51 +0000

When we implement a dropdown or drawer component in React, these components often require to be closed when mouse-clicking either the menu button or outside of the component.

To allow this behavior in our custom components, we can create a custom hook that allows us to apply the same behavior whenever we need it.

Here is a simple custom hook that checks if the mouse clicks outside of the current component.

const useCheckOutside = 
(clickOutside: () => void, exceptId?: string) => ...

We named the hook useCheckOutside, and it receives the clickOutside function as a property that allows the parent component to receive the event.

exceptId is an optional property that can be used to ignore the place where we don't want the close behavior when the place is clicked. We need this because usually the menu or the dropdown button is also a part of the outside clicks, and the button's onClick event changes the menu or dropdown's visibility to be visible whereas the outside click changes the visibility to be hidden. The below function describes that the exceptId will be ignored in the mousedown event.

const checkOutsideClick = (event: any) => {
      if (
        ref.current &&
        !ref.current.contains(event.target) &&
        event.target.id !== exceptId
      ) {
        clickOutside();
      }
    };

document.addEventListener('mousedown', checkOutsideClick);

Here is the entire code for the useCheckoutside hook with a simple example of how to use.

import { useEffect, useRef } from 'react';

const useCheckOutside = 
      (clickOutside: () => void, 
       exceptId?: string) => {

  const ref = useRef<any>();

  useEffect(() => {
    const checkOutsideClick = (event: any) => {
      if (
        ref.current &&
        !ref.current.contains(event.target) &&
        event.target.id !== exceptId
      ) {
        clickOutside();
      }
    };
    document.addEventListener('mousedown', checkOutsideClick);
    return () => {
      document.removeEventListener('mousedown', checkOutsideClick);
    };
  }, [clickOutside]);

  return ref;
};

export default useCheckOutside;


const handleOutsideClick = () => {
     setOpen(false);
}

const ref = useCheckOutside(handleOutsideClick, "buttonId");

return <>
         <button id="buttonId" type="button" 
                 onClick={(e) => {
                   setOpen(true)
                 }
          >
          Menu
          </button>

          {open && <Menu ref={ref} />}
        </>

Call Child Component's Functions From Parent Component

Shin-Young Jung — Wed, 15 Nov 2023 13:51:21 +0000

Sometimes, we want to call functions from child components. It's easier to call the parent's function by sending the function as a property, but to call the child component's function is a bit tricky. In most cases, if we design the component properly with SOLID patterns, there are not many chances to face this situation.

1. Using `forwardRef` and `useImperativeHandle`

You can wrap the Component that you want to access with forwardRef and define useImperativeHandle


    import React, {
      forwardRef,
      useImperativeHandle
    };

    const TestComponent = forwardRef((variables, ref) => {

      useImperativeHandle(ref, () => ({

        customFunc() {
          // do what you want here: you can return value 
          // or call function inside of the TestComponent
        }
      }))

      return <div > Hello < /div>;

    })

and from another component,

    import React, {useRef} from 'react';

    const AnotherComponent = () => {
      const compRef = useRef();


      return <div role="none" onClick={() => {
      // this func() will be replaced the function that you defined in the
      // useImperativeHandle from the TEstComponent
      compRef.func()
      }}>
        <TestComponent ref={compRef} />
      </div>
    }

2. Using `React.useEffect` and `React.State`

You can update the state from the Parent Component and pass that state variable to the component that you want to receive.


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

    // Parent Component 
    const ParentComponent = () => {
      // better to use object due to refresh the variable
      const [state, setState] = useState(null);




      return <div role="none" onClick={() => {
        // if you click the parent component it will update state
        // and when the state is updated, then the Child Component will 
        // receive the update from the useEffect
        setState({update: 'update'});
      }}> 
              <ChildrenComponent update={state} /> 
             </div>;

    }

    const ChildComponent = ({update}) => {

    useEffect(() => {
    // this will be called whenever the update object is changed
    // so you can put something here to update the Child Component's state
    }, [update])

    return <div>Child</div>

    }

What is HTTP & QUIC?

Shin-Young Jung — Tue, 29 Jun 2021 07:15:28 +0000

HTTP /0.9 ~/2 uses TCP

HTTP /0.9

It has only one method, GET.

Request

GET /index.html

Response

<HTML>
Hello World
</HTML>

HTTP /1.0

header is added.

Request

GET /index.html HTTP/1.0
User-Agent: NCSA_Mosic/2.0 (Windows 3.1)

Response

Because header defines Content-Type, now it can send other types of data

200 OK
Date: Tue, 15 Nov 1995 05:12:22 GMT
Server: CERN/3.- libwww/2.17
Content-Type: text/html
<HTML>
Hello World
    <img src="/image.gif"/>
</HTML>

The characteristic of the HTTP /1.0 is 1 Request & 1 Response Per Connection. This causes two main problems, 1. performance drops due to the new connection every time, and 2. cost inefficiency due to the server load.

HTTP /1.1

To solve the version 1. 0's limitations, 1.1 provides the functionality called Persistent Connection which allows to receive multiple requests and send multiple responses for certain amount of times by using timeout parameters. Also, 1.1 applies pipelining which allows the server not to wait for the response, but to receive all requests in order and responses at once in order. This reduces the delay time of the communication between the client and the server.

However, pipelining function causes a major problem called Head Of Line Blocking. Basically, if three requests were happened, and the initial request takes time to resolve, then the rest needs to be wait for the initial request to be resolved and be ready to respond.

Also, multiple requests may have the same header info which introduce the header duplication issue.

HTTP /2

HTTP /2 focus on the performance improvements compares to the prior HTTP /1.X. This version does not replace the standard protocol, but gives a meaning of extension. Currently, Naver, facebook, Instagram, and many others applied HTTP 2 protocol.

We can find changes in the message transferring method. HTTP /2 uses binary framing layer, and this allows to improve the transfer speed and lower the possibility of causing errors. As you see the diagram above, HTTP 2.0's message is designed to use the frame unit and encoded as binary (parsing and transferring speed is improved, and less error than handling strings).

This frame structure allows to ignore the order of requests and responses, and combine and split the frames depends on their speeds. This request and response multiplexing resolve the Head Of Line Blocking.

How To Find out protocol from the Web browser

Open inspector or development tool and choose network tab
Right click on the network table and choose protocol to add to the table

Stream in HTTP /2 also allows to set priority. Server can push the data that the client doesn't ask for.

HTTP /2 uses header compression to reduce the header size. To compress the duplicated header, it uses Huffman Encoding. This reduces the header size by 85% in general and also reduce the page loading time. (Testing in real time)

QUIC

QUIC is a transfer layer protocol like TCP and UDP. Google introduced the concept in 2013, and they use this as a default protocol for most of their products. QUIC is based on UDP.

TCP header holds lots of data that enable the data integrity and trust, but because of this, the speed of process is slow. On the other hand, UDP doesn't really hold much of data in the header, so it gives much faster performance and speed compares to TCP, but doesn't guarantee the integrity, trust, and the order of data. UDP is designed for the data transfer only, and there is no extra functions. Thus, this allows engineers to implement and add the needs to it. Google modified the UDP protocol to enhance the performance as well as the data integrity and trust like TCP.

QUIC sends the message with the initial settings and save the settings into cache to use repeatedly for the future request without handshake. one of the caching method from QUIC is using Connection UUID. This unique ID allows users to maintain their connectivity even if the IP address of the client becomes changed.

QUIC is secured. TLS is applied to QUIC by default, and QUIC uses Source Address Token to protect from IP Spoofing and Replay Attack. QUIC uses individual stream line, and this enhances the multiplexing function. (TCP uses the single stream line with parallel processing).

By using QUIC, Google reduce the loading time by 3 % in google.com, and enhance the buffering issues by 30% in youtube.com.

HTTP /3

HTTP 3(h3-29) was introduced in 2018, and it is based on QUIC, and Google is currently using it in their products.

Web Server & Web Application Server

Shin-Young Jung — Mon, 28 Jun 2021 06:34:25 +0000

Web Server

Web server is a program that provides static contents like HTML documents by receiving HTTP request from the web browser (client).

Static contents mean that no matter what parameters or users will be, the response always includes the same contents.

Web Server's Functionalities

Receives HTTP request from the client
For static contents, the server can provides static contents (html, jpeg, css, etc.)
For dynamic contents, the server delivers dynamic contents request to Web Application Server (WAS), and pass results from the WAS.

Web Application Server (WAS)

Web application server is a program that is implemented for providing dynamic contents which require various logic processes or DB queries.

Dynamic contents can be varied from the input parameters or users

WAS can

directly receive HTTP request from the client
provide static contents (html, jpeg, css, etc.)
provide dynamic contents by processing various logics and DB query

Why we need WS for WAS?

We may need WS because we can separate the roles between WS (for static contents) and WAS (for dynamic contents).
If we use multiple WAS, then WS can be a load balancer to distribute the request calls from the client.
WS can regularly check the WAS health (check if response comes correctly)
We can use reverse proxy from WS to secure the data from the WAS.

Common Web Server Software

Apache HTTP server
Nginx
Sun Java System Web Server
...

DEV Community: Shin-Young Jung

Improving UX by using cache

Problem

Tanstack Query

Prefetch data

How to use multiple refs for an array of elements with React Hooks

Single reference

Multiple references

CSS @supports

[Personal Log] iOS Safari Error: React App

React: How to support multi-language service (Internationalization)

Basic Setup

How To Use

Change Language Preference

Manual Fetch with Tanstack Query

ERROR: A blank page appears after deploying your Vite React App

Using Context APIs: Avoid Prop drilling and Manage States in React

Suggested Folder Structure

How To Use

React Hook: check outside click

Call Child Component's Functions From Parent Component

1. Using forwardRef and useImperativeHandle

2. Using React.useEffect and React.State

What is HTTP & QUIC?

HTTP /0.9

HTTP /1.0

HTTP /1.1

HTTP /2

QUIC

HTTP /3

Web Server & Web Application Server

Web Server

Web Server's Functionalities

Web Application Server (WAS)

WAS can

Why we need WS for WAS?

Common Web Server Software

1. Using `forwardRef` and `useImperativeHandle`

2. Using `React.useEffect` and `React.State`