DEV Community: Ogasawara Kakeru

React.js ~The Latest Ref Pattern~

Ogasawara Kakeru — Mon, 07 Sep 2026 08:39:36 +0000

The Latest Ref Pattern is a simple design pattern that holds latest value or callback function without re-rendering.

Here is a basic implementation bellow:

const latestValueRef = React.useRef(value);
React.useLayoutEffect(() => {
  latestValueRef.current = value;
});

Pros

Excluding from dependency array: When you want to refer a latest value or callback function in the useEffect or custom hook, you can fetch them safely without dependency array.
Prevent unnecessary rendering: The useRef doesn't trigger unnecessary rendering, therfore it optimizes performance.

React.js ~Tips for making UI that is reusable and testable~

Ogasawara Kakeru — Sat, 05 Sep 2026 07:00:15 +0000

Compound Component Pattern

If you find yourself passing props through multiple layers of components, consider using the Compound Component Pattern.

The Compound Component Pattern is a powerful design pattern that is widely used in React applications. It can improve reusability, readability, and scalability.

This pattern builds a UI by combining multiple related child components under a shared parent component.

A familiar example is the element and its elements. These elements are designed to work together rather than independently. The element manages the selected value, while the elements represent the available choices.

Similarly, in the Compound Component Pattern, state is typically managed by the parent component and shared with its child components.

This pattern also establishes an implicit relationship between the parent and child components while still allowing consumers to customize the component structure.

Without the Compound Component Pattern

First, let’s implement a counter component without using the Compound Component Pattern.

You might notice that the component starts to become a little complicated because it has to manage the counter state, conditionally apply styles based on that state, and define the behavior of each UI element.

Counter.tsx

const Counter = () => {
  const { count, handleDecrementClick, handleIncrementClick } = useCounter();
  return (
    <>
      <p className="count">
        Count: <span className={count <= 10 ? "red" : ""}>{count}</span>
      </p>
      <button className="minus-button" onClick={handleDecrementClick}>
        -
      </button>
      <button className="plus-button" onClick={handleIncrementClick}>
        +
      </button>
    </>
  );
};

Using the Compound Component Pattern

Now, let’s implement the same component using the Compound Component Pattern.

You might notice that the component becomes much more declarative and easier to read.

Counter.tsx

const CounterExample = () => {
  const handleChangeCounter = (count: number) => {
    console.log("count", count);
  };
  return (
    <Counter onChange={handleChangeCounter}>
      <Counter.Label>
        Count: <Counter.Count max={10} />
      </Counter.Label>
      <Counter.Increment>+</Counter.Increment>
      <Counter.Decrement>-</Counter.Decrement>
    </Counter>
  );
};

With the Compound Component Pattern, each child component has a clear responsibility.

The parent component manages the shared state, while components such as , , and provide specific pieces of functionality.

As a result, users of the component can understand its structure directly from the JSX and can arrange the child components more flexibly without having to manage the internal state themselves.

React.js ~Tips for making UI that is reusable and testable~

Ogasawara Kakeru — Fri, 28 Aug 2026 13:42:33 +0000

In the previous article, I wrote about a single responsibility of HTML and CSS.
In this article, I'm goint to write about State Reducer Pattern.

Important thing to consider before adding new features.

Let's consider State Reducer Pattern before adding new features such as if statemant, parameter or return value to existing function

This might be unknown pattern. This pattern extends Inversion of Control Pattern that is expanded by Martin Fowler who is known as an author of Refactoring Book. Inversion of Control pattern is also known as “control inversion” or the Dependency Injection pattern.

State Reducer Pattern is invented by Kent C.Dodds who is also known as a creator of React Testing Library.

If you add a argument, option and conditional statement, you add new ones over and over again every time you implement them.

It doesn't matter once. However, when multiple time added by other developers, this component gets more complex.

This is State Reducer Pattern to prevent this case.

Here is a specific example of a use case.
We need to add new functionality to a count button on a page.
The existing count button works as follows:
When the plus button is clicked, the count increases by 1, up to a maximum of 5.
When the minus button is clicked, the count decreases by 1, down to a minimum of 0.
The new functionality we want to add is as follows:
When the plus button is clicked, the count increases by 1, up to a maximum of 10.
When the minus button is clicked, the count decreases by 2, down to a minimum of 0.
In a typical scenario, you would add arguments or conditional branching to useCounter() to define the maximum number of clicks allowed and the amount by which the count decreases with each click.

const useCounter = () => {
 const [state, dispatch] = useReducer(reducer, initialState);
   function reducer(state, action) {
     switch (action.type) {
       case "increment":
         return {
           count: Math.min(state.count + 1, 5)
         };
       case "decrement":
         return {
           count: Math.max(0, state.count - 1)
         };
       // Add new use case   
       case "decrement-two": 
         return {
           count: Math.max(0, state.count - 2)
         };
       default:
         throw new Error();
     }
   }

   const handleIncrementClick = () => {
     dispatch({ type: "increment" });
   };

   const handleDecrementClick = () => {
     dispatch({ type: "decrement" });
   };

   // Add a function for the new case   
   const handleDecrementTwoClick = () => {
     dispatch({ type: "decrement-two" });
   };

   return {
     count,
     handleIncrementClick,
     handleDecrementClick,
     handleDecrementTwoClick, // Add a return value to use in UI component
   }
}

However, the State Reducer pattern does not add logic to useCounter(); instead, it defines a reducer (logic) for a new use case within the Usage component (the child component that uses useCounter()) and passes it to useCounter() as an argument.
This allows you to add new functionality without affecting existing features or useCounter() itself.


const Usage = (): JSX.Element => {
  const reducer = (state: typeof initialState, action: ACTIONTYPE) => {
    switch (action.type) {
      case "decrement":
        return {
          count: Math.max(0, state.count - 2) //　Process that subtracts 2 each time the minus button is clicked (default: process that subtracts 1 each time the minus button is clicked)
        };
      default:
        return useCounter.reducer(state, action);
    }
  };

  const { count, handleDecrementClick, handleIncrementClick } = useCounter({
    state: { initial: 0, max: 10 },
    reducer
  });

  return (....) // Save

export const useCounter = ({
  state,
  // Modify existinf reducer to internalReducer
  reducer = internalReducer 
}: useCounterProps): useCounterReturnType => {
  const [{ count }, dispatch] = useReducer(reducer, { count: state.initial });

  const handleIncrementClick = () => {
    dispatch({ type: "increment", payload: { max: state.max } });
  };

  const handleDecrementClick = () => {
    dispatch({ type: "decrement" });
  };

  return {
    count,
    handleIncrementClick,
    handleDecrementClick
  };
};

useCounter.reducer = internalReducer;

If you find yourself adding conditional branching—such as if or switch statements—to existing functions, consider reversing the control flow by moving the logic from the parent component to the child component, rather than having the parent component use the logic in the child component.

React.js ~Tips for making UI that is reusable and testable~

Ogasawara Kakeru — Sat, 22 Aug 2026 01:57:52 +0000

If you participate in a project or see the codebases of OSS project, you come across UI to tackle complex specifications.

Here are specific cases below.

The bundle size is getting too large.
High maintenance and upkeep costs
- You have to ask what the component does.
- It is difficult to understand what the component does if you ask.
Low reusability
- There are too many criteria to use the component, and it follows that you make a similar one.
Complex API
- There are so many props that you can’t count them all on the fingers of one hand.
- It's hard to determine whether we can implement the use case using existing features.

To deal with these issues, here are some solutions bellow.

No.1 Weather HTML and CSS have a single responsibility.

<Button
  prefix={helpIcon}
  surfix={heartIcon} 
  hover={filledHelpicon}
  text="hello" 
  color="green" 
  primary={true}
  toolip={<Tooltip/>}
  onClick={handleClick}
  ...
/>

This is close to the extension of OBJ programming.
This Button component has multiple responsibilites such as rendering Icon component and Tooltip component in addition to rendering Button component itself.

Therefore, you should care for combining rather than extesion.
You should not pass them as props, but children.

<Button 
  primary
  onClick={handleClick}
>
  <HelpIcon/>
  <InnerText color="green">hello</InnerText />
  <HeartIcon />
</Button>

Furthermore, while JavaScript successfully separates concerns and responsibilities, I often see UIs where the roles of HTML and CSS are not separated—appearance, structure, interactions, and spacing are all implemented using a single selector and deeply nested CSS.
To tackle complex specifications, we must implement HTML and CSS in accordance with the Single Responsibility Principle. Being mindful of the Single Responsibility Principle will also help reduce redundant and unnecessary CSS.

React.js ~useEffect memoization pattern for preventing unnecessary rendering~

Ogasawara Kakeru — Fri, 07 Aug 2026 20:47:21 +0000

This pattern is memoization with React.memo. This is known as optimization among React developer.

React.memo reuses a memoiszed component without rerendering if it is necessary in comparison between current Props and previous one.

In the demo below, even though the name state changes and the <App /> component re-renders, the props passed to the <SuperSlowComponent /> component do not change, so <SuperSlowComponent /> does not re-render.

import { memo, useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return (
    <>
      <div>Super slow component</div>
    </>
  );
}

const MemoSupserSlowComponent = memo(SuperSlowComponent);

export default function App() {
  const [name, setName] = useState("");

  return (
    <div className="app">
      <label htmlFor="name">Name</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <MemoSupserSlowComponent />
    </div>
  );
}

React.js ~Liftup Pattern for Preventing unnecessary rendering~

Ogasawara Kakeru — Tue, 04 Aug 2026 19:57:53 +0000

Liftup Pattern
In contrast to the liftdown pattern,the pattern that lifts up a part of component that depends on the state can prevents unnecessary rendering.
An example below shows <SuperSlowComponent/> when hide is typed in the form.

import { useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return <div>Super slow component</div>;
}

function Form({ name, setName }) {
  return (
    <>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </>
  );
}

export default function App() {
  const [name, setName] = useState("");
  return (
    <div className="app">
      <Form name={name} setName={setName} />
      {name !== "hide" && <SuperSlowComponent />}
    </div>
  );
}

This method invokes rerendering the slow component everytime you type values in the field. For now, let's go back to managing useState in the <Form /> component instead of calling it from <App />.

By using liftup pattern, The difference from liftdown pattern is passing the slow component as a children. Since children is simply a prop, it is not affected by changes in state and therefore will not be re-rendered.

import { useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return <div>Super slow component</div>;
}

function Form({ children }) {
  const [name, setName] = useState("");

  return (
    <>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      {name !== "hide" && children}
    </>
  );
}

export default function App() {
  return (
    <Form>
      <SuperSlowComponent />
    </Form>
  );
}

As a variation of the lift-up pattern, there is also a pattern where components are passed as Props instead of being passed as children.

import { useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return <div>Super slow component</div>;
}

function Form({ left, right }) {
  const [name, setName] = useState("");
  return (
    <>
      {left}
      <label htmlFor="name">Name</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      {right}
    </>
  );
}

export default function App() {
  return (
    <div className="app">
      <Form right={<SuperSlowComponent />} left={<h1>Hello</h1>} />
    </div>
  );
}

React.js ~State lift down patterns for preventing unnecessary rendering~

Ogasawara Kakeru — Sun, 02 Aug 2026 01:34:10 +0000

React invokes unnecessary rendering as follows;

When a state is updated in a component
When a parent component is renderd

A component that invokes a heavy rendering

Let's consider aa component that invokes a heavy rendering.
<SuperSlowComponent> is equipped with a while loop that renders a JSX synchronously in 200ms.

import { useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return <div>Super slow component</div>;
}

export default function App() {
  const [name, setName] = useState("");
  return (
    <div className="App">
      <label htmlFor="name">Name</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <SuperSlowComponent />
    </div>
  );
}

The issue is that <SuperSlowComponent> is rendered everytime state is updated by putting values to the input form, and calling setName.

State Lift Down Pattern
This pattern involves a specific state depending on a specific component. By extracting it to another component, the other parts of the component won't be rerendered. This is because the child component keeps the state.

Let's see the paractical codebase.

import { useState } from "react";

function SuperSlowComponent() {
  const now = performance.now();
  while (performance.now() - now < 200) {}
  return <div>Super slow component</div>;
}

function Form() {
  const [name, setName] = useState("");

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

export default function App() {
  return (
    <div className="App">
      <Form />
      <SuperSlowComponent />
    </div>
  );
}

React.js ~useEffect for synchronizing an external system~

Ogasawara Kakeru — Wed, 29 Jul 2026 20:16:03 +0000

In React, useEffect is a hook that is used to synchronize an external system.

What is an external system ?
The external system here indicates an system that isn't controled by React. Such as

Network
Browser API
Third party library or widegt

These systems are out side of React, and isolated from React's state management or life cycle.

synchronization between component and external system
There is a specific component that synchronizes an external system in components.

Let's consider a <Clock /> that dusplays the current time.

synchronizing component and the current time is not a pure calculation. So,

You must not write the code below;

// Bad: Get the current time during rendering.
const Clock = () => {
  // new Date() is not pure.
  const dateTime = new Date();
  return <div>{dateTime.toLocaleString()}</p>;
};

In the light of the above, implementing the `<Clock />` is follows;

Furthermore, synchronization of the current time should occur as part of the component's rendering, regardless of user interaction; this is what is known as an effect.

// Good: Getting current time runs in the effect
const Clock = () => {
  const [dateTime, setDateTime] = useState(() => new Date());

  // synchronization of current time is written as an effect
  useEffect(() => {
    const id = setInterval(() => {
      setDateTime(new Date());
    }, 1000);

    // Clean up
    return () => {
      clearInterval(id);
    };
  }, []);

  return <div>{dateTime.toLocaleString()}</p>;
};

As such, You can synchronize a component and an external system by using useEffect.

Starting and stop synchronization
When you synchronize useEffect and external system, effect can be considered as a process of synchronization.

Basicly, things that effect does are follows;

Start synchronization.
Stop synchronization.

In many cases, you have to take stopping into considerstion. Because useEffect needs to restore an effect when unmounting a component.

useEffect(() => {
  // Start
  const id = setInterval(() => {
    setTime(new Date());
  }, 1000);

  // Stop
  return () => {
    clearInterval(id);
  };
}, []);

In this effect, things goes as follows;

1.Starting a synchronization: Updating current time starts by using setInterval. This is connecting to an external system.

2.Stopping a synchronization: You call clearInterval by using a clean up function. This is disconnection an external system.

React.js ~useEffect~

Ogasawara Kakeru — Wed, 22 Jul 2026 19:26:20 +0000

React rendering must be pure. You should not include side effect while rendering. This rule is defined in React.

Side effect must not run while rendering.

If side effect occures in user interaction, you should keep rendering pure by handling side effect in event handler.

By using event handler, you can tell react that the codebase need not run while rendering.

However, all of side effects run always with event handlers.

That's where effects come in.

Effect runs by not a specific event handler but rendering component.

useEffect is the hook that is used for handling effect. React uses it asa mark of effect.

effect occures by not an event but rendering. Therefore, useEffect separates effect from rendering, and delays code executing untill thecresukt of rendering is shown on the screen.

By using useEffect, you can keep rendering pure, and handle the effects properly.

React.js ~useEffect~

Ogasawara Kakeru — Thu, 16 Jul 2026 21:09:22 +0000

What is effect?

As i mentioned, React is a pure function. This means React should not include side effect. This principle is defined as a React's rule.

Refference: https://react.dev/reference/rules/components-and-hooks-must-be-pure

If any side effect occures with user interaction, you can keep pure function by writing side effect in the event handler.
Writing side effect in the event handler, you can tell React that the side effect doesn't occuer in rendering.

However, Not all side effects are caused by a specific event. That’s where effects come into play. Effects are side effects that are caused by not an specific handler but a rendering. useEffect is a hook that is used for handle side effect in React. React uses useEffect as a mark of effect.

Effect is occured by not event but rendering as a side effect. thus, useEffect separates effect from rendering, and delay the running codebases untill the result of rendering is reflected on the screen.

By using useEffect, you can keep rendering pure, and handle effect properly.

React.js ~useEffect~

Ogasawara Kakeru — Sat, 11 Jul 2026 00:55:13 +0000

Before thinking about useEffect, you have to understand purelity of component. This is an essential concept of React.

React is assumed as a pure function.

The pure function is the function that does nothing but calculation.
Here are features bellow:

Focuses on it's own bussiness. This doesn't modify existing object or valuable.
The same input produces the same output.Given the same input, a pure function always returns the same result.

React component is a function as well. you can apply those features to React component.

It is idempotent
It has no side effects during rendering
It does not modify anything other than local values

As a general rule, components should be pure. In React, this means that components do not affect anything outside the component and must always return the same output given the same input.

The inputs for a React component are props, state, and context, and the output is JSX.

const Counter = ({ count }: { count: nubmer }) => {
  return <div>Count: {count}</div>;
};

The component above is a simple component that accepts an input (prop) called count and displays it. Since this is a pure component, it always returns the same output when given the same count as an input (prop).
On the other hand, the following code is not a pure component.

let count = 0;

const Counter = () => {
  count = count + 1;
  return <div>Count: {count}</div>;
};

The component above modifies the count variable outside the component during rendering. As a result, if the component is called multiple times, the output will differ even though the input remains the same.
Such impure components can cause unexpected behavior and lead to bugs, so they should be avoided.
As we’ve seen so far, purity is an important concept in React. However, in real-world programming, side effects—such as accessing global variables, modifying the DOM, or updating data—are sometimes necessary.
While the component rendering process should always be pure, it’s impossible to completely eliminate side effects in programming. Therefore, we need a way to safely handle side effects while keeping the rendering process pure.

React provides two main methods for safely handling side effects:

Event handlers: Functions that React calls when a user action is triggered
useEffect: A React hook for handling side effects associated with rendering

Of the two, side effects typically belong in event handlers. Since this article focuses on useEffect, we won’t go into detail about event handlers here, but that doesn’t mean useEffect is inherently superior to event handlers for handling side effects.
Instead, keep in mind that useEffect is a last resort.

React.js ~useEffect event handler~

Ogasawara Kakeru — Thu, 02 Jul 2026 21:30:00 +0000

In case you want to manipulate DOM that can not be handled by React, useEffect is required. React is used for managing UI. So it is proper to use useEffect for manipulating DOM.

const Component = () => {
  const [h, setH] = useState(0);

  useEffect(() => {
    const handler = () => {
      setH(h => (h + 1) % 360);
    };
    window.addEventListener("pointermove", handler);
    return () => {
      window.removeEventListener("pointermove", handler);
    };
  }, []);

  return (
    <div
      style={{
        backgroundColor: `hsl(${h}, 100%, 50%)`,
        width: "100px",
        height: "100px"
      }}
    />
  );
};