11 posts tagged with "web"

Purpose​

React 18 was released in 2022, and the Next.js App Router was released in 2023, making this a somewhat outdated investigation. However, while using the Next.js page router and app router, I found an article explaining the differences and reasons for the changes, particularly why the app router was introduced. This document summarizes my understanding of that article.

Story​

Before reading the article, consider the following scenarios:

Imagine you're at a job interview for a Frontend Developer position and are asked the following questions. Or perhaps you're in a meeting trying to convince your team to use the Next.js app router for a new or existing project. Or maybe you're contemplating which technology is more suitable between the Next.js page router and app router.

While simply stating that the app router is a new technology and advocating for its use as a Frontend Developer can be persuasive, understanding the answers to the questions below can provide a more compelling argument.

If you know the answers to these questions, you might not need to read the full text. However, if you want a more reliable source, you can refer to the React 18 Architecture introduction. If you only want the answers, you can skip to the Result.

The following text is a summary of my understanding, mixed with my opinions, after reading the Architecture article.

Introduction​

Have you ever considered the capacity when using LocalStorage in your project?

Depending on the purpose of localStorage, it might not be something you often think about. However, if you're storing data that accumulates over time, the data can exceed the localStorage capacity.

What happens when it exceeds? 초과하면 과연 어떻게 동작할까요?

The answer is It throws an error.

Figure 1Local Storage Exceed Error

Solution​

When the error occurs, the setStorage statement terminates due to the throw, and the error propagation begins.

If your project handles error propagation well, the error message will be logged, and if not, the project might stop.

To prevent this situation, you should use a try-catch block to catch the error and add logic to handle it.

const setStorage = (key, value) => {
  try {
    window.localStorage.setItem(key, value);
  } catch (e) {
    // Stop Throw Error
    console.error('Local Storage Exceed Error', e);
  }
}

Of course, an error indicates that the localStorage capacity has been exceeded, so the user will continue to encounter Local Storage Exceed Errors and won't be able to save data.

Therefore, in addition to error handling, you should also include logic to clear the data.

const setStorage = (key, value) => {
  try {
    window.localStorage.setItem(key, value);
  } catch (e) {
    // Stop Throw Error
    console.error('Local Storage Exceed Error', e);
    window.localStorage.clear();
  }
}

Introduction​

When mixing React's event handler method with vanilla Javascript's event handler method, event propagation may not work as intended. For example, in a structure like button1, button2, clicking button2 can trigger the event handler of button1 as well.

const buttonEl = document.getElementById('button1');
buttonEl.addEventListener('click', () => {
  console.log('button1 clicked');
});

const handleClick = (e) => {
  e.stopPropagation();
  console.log('button2 clicked');
};

return (
  <button id='button1'>
    <button id='button2' onClick={handleClick}>Click me</button>
  </button>
);

// When button2 is clicked
button2 clicked
button1 clicked

Solution​

Event propagation in React differs from that in vanilla Javascript because React handles event propagation using a delegation method. (comment)

In React (post React 17), event listeners are registered on the rootDOM. Therefore, event listeners within React propagate as expected according to the DOM structure, but vanilla Javascript event propagation may not behave as anticipated.

While it's best to avoid mixing the two types of events, sometimes it's unavoidable when using third-party libraries or handling parts of the code you can't control. In such cases, you must block event propagation according to the behavior of each method.

// Unify event listener to vanilla Javascript
const buttonEl = document.getElementById('button1');
buttonEl.addEventListener('click', () => {
  console.log('button1 clicked');
});

const button2El = document.getElementById('button2');
button2El.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('button2 clicked');
});

return (
  <button id='button1'>
    <button id='button2'>Click me</button>
  </button>
);

// Or
// Unify event listener to React
const handleClick1 = (e) => {
  console.log('button1 clicked');
};

const handleClick = (e) => {
  e.stopPropagation();
  console.log('button2 clicked');
};

return (
  <button id='button1' onClick={handleClick1}>
    <button id='button2' onClick={handleClick}>Click me</button>
  </button>
);

Introduction​

In Next.js, server actions are used as a way to call functions via the server, even in a client environment. Server actions are executed sequentially, meaning that even if multiple functions are called, they are executed one at a time, so caution is needed when using them.

Behavior​

Let's look at a brief example. There are two functions in this example.

'use server';
import { format } from 'date-fns';

export const callServerFn = async (count)=> {
  return new Promise((resolve) => setTimeout(() => {
    const time = format(new Date(), 'HH:mm:SS.sss');
    console.log(`Server Call #${count}: `, time);
    resolve(count)
  }, 1000));
}

The callServerFn function takes 1 second to respond and is used as a server action with 'use server'. This logic is executed on the Next server. Logs are used to check the server response timing.

// client.tsx
'use client';

export const CallButton = () => {
  const handleClick = async () => {
    const result = await Promise.all([
      callServer(1),
      callServer(2),
      callServer(3),
    ])
  }

  return (<button onClick={handleClick}>Hello World</button>);
}

The CallButton component calls the callServer function three times when the button is clicked and returns the result when all functions are completed.

Server Call #1:  01:23:22.010
Server Call #2:  01:23:24.011
Server Call #3:  01:23:25.012

When the button is pressed, three calls are made simultaneously, but the log results show that they are called sequentially, once every second.

Introduction​

In CSS, line-height is used to adjust line spacing. However, in a project I worked on, there was a requirement to support line-spacing. This article explains how to implement line-spacing using CSS.

Cheat Sheet​

Unlike line-height, which applies padding both above and below the text, line-spacing applies padding only between lines. The difference here is that line-spacing does not add padding at the beginning and end of the text block.

You can implement line-spacing using margins.

const lineHeight = 20; // origin line-height
const lineSpacing = 10;
const margin = - (lineSpacing / 2);

const LineSpacingText = () => {
  return (
    <p style={{
      marginTop: `${margin}px`,
      marginBottom: `${margin}px`,
      lineHeight: `${lineHeight + lineSpacing}px`,
    }}>
      Hello, World!
    </p>
  );
};

Playground​

Introduction​

During a project, I encountered an issue where unnecessary re-renders were occurring.

The problem was not just rendering, but the fact that the DOM was being completely redrawn with each render. The culprit was the use of nested components in the code.

In this article, I will explain why you should avoid using nested components.

Cheat Sheet​

// Bad
const List = ({ hasWrapper, borderStyle, children }) => {
  const Border = () => {
    return <p style={borderStyle}>{children}</p>;
  }

  if (hasWrapper) {
    return (
      <Wrapper>
        <Border />
      </Wrapper>
    );
  }

  return <Border/>;
};

// Good
const List = ({ hasWrapper, borderStyle, children }) => {
  if (hasWrapper) {
    return (
      <Wrapper>
        <Border borderStyle={borderStyle}>
          {children}
        </Border>
      </Wrapper>
    );
  }

  return (
    <Border borderStyle={borderStyle}>
      {children}
    </Border>
  );
};

const Border = ({ borderStyle, children }) => {
  return <p style={borderStyle}>{children}</p>;
}

As shown above, you might use a nested component to reuse the code for Border and the props of List. However, in such cases, the children are unnecessarily repaint in the DOM with each render.

In React, when passing a function as component props, one needs to be careful with managing references to avoid unnecessary re-renders. Although most case we use useCallback to prevent unnecessary re-renders, I found an alternative solution sharing.

The code that inspired this article is radix-ui/primitives's useCallbackRef. This article will discuss the use cases and logic of useCallbackRef.

Below is the useCallbackRef code we are going to discuss. Can you guess in what situations it might be used?

// useCallbackRef.js
import { useRef, useEffect, useMemo } from 'react';

export function useCallbackRef(callback) {
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  });

  return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
}

I am using OAS-generator in project recently. When deciding to use it, there were many things that required consideration and confirmation. And, I'm going to write about my experience using OAS-generator because it seems to have a lot of good things after using.

Perhaps those who are curious about what OAS-generator is, those who know but are worried about using it, and those who are already using it but are hesitant to use it well, I hope that you will learn good motifs and experiences by reading this article.

What this article says is as follows.

• What is the OAS-generator.
• The pros and cons of using OAS-generator.
• How to use OAS-generator.
  • Configuration
  • Custom Templates
• Optimization

This article basically takes time to learn about immer immer. If you don't know immer, I recommend reading next chapter first.

What is my curious?​

immer functions to return data immutably even when using the object built-in method that changes to be mutable. Let's find out how this function works internally.

This example is following basic example of immer official docs

import produce from 'immer';

const baseState = [
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Try Immer", 
    done: false,
  },
]

const nextState = produce(baseState, (draft) => {
  draft.push({ title: "Tweet about It" });
  draft[1].done = true;
})

console.log(baseState === nextState) // false
console.log(nextState)
/*
[
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Tweet about It",
  },
]
*/

To update object immutably means that original object is copied to new object. In other word, copy needs to cost. When immer copy object, the unchanged reference copies the object using the structural sharing method that is reused. Let's find out what kind of structural sharing is used in immer.

When using an immer, there is a case of returning a new object instead of the mutable update method suggested above. This is same as the method of returning objects from javascript immutably regardless of the immer. immer officially is guiding this way and There will be many developers who use both methods, the method of changing objects to be mutable and method of changing objects to be immutable. Let's see what logic differences these differences cause in the immer.

// mutable method
const nextState = produce(baseState, (draft) => {
  draft.push({ title: "Tweet about It" });
  draft[1].done = true;
})

// immutable method
const nextState = produce(baseState, (draft) => {
  return {
    ...baseState,
    { ...baseState[1], done: true },
    { title: "Tweet about It" },
  }
})

Purpose​

If you used redux in web application devlopment, you may have experience to use time-travel debugging with redux-devtools.

If you have confused about what redux-devtools is, please see below video.

If you don't have any experience about redux-devtools, I think it may be difficult to understand this article.

redux-devtools records the redux information(action, reducer state) of web applications using redux, rollback to the reducer at a specific point in time and can pretend that there was no specific action. However, It is not simple to try to implement similar actions inside web applictions without using redux-devtools. For example, If you press the A button, make as if The action that's been happening so far didn't happen or if you leave before pressing the Submit button, rollback all actions that occurred on the page.

redux-devtools is an easy to provide function with buttons, but I don't know how to implement it myself. How does redux-devtools make these things possible?

In this article, we will check below three things.

• How to log the actions and reducer called in redux-devtools.
• How to jump to a point where specific action is dispatched in redux-devtools.
• How to skip a specific action as if it did not work in redux-devtools