5 posts tagged with "web"

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

Purpose​

axios support feature to cancel HTTP Request. We will investigate that how to work about axios cancel logic.