DEV Community: Thamizh Arasan

Not Just Another Redux Article: Learning Redux from Its Source Code

Thamizh Arasan — Sun, 04 May 2025 09:11:00 +0000

Let’s go beyond the usual Redux tutorials. In this case study, we’ll learn the core concepts and APIs of Redux directly from its source code. I promise, this approach is both fun and much easier to understand!

Do we always need Redux? No.

Is Redux useful? Absolutely-yes, yes, yes!

Choosing Redux is a bit like choosing useMemo() in React: it’s a powerful tool, but only when there’s a real need. There are alternative ways to solve problems that Redux addresses. For example, code splitting can help us avoid using useMemo() and encourage us to think in a more "React way." So, should we avoid Redux? Or are there specific conditions when Redux is the right choice? To answer this, let’s not just follow the advice of experts like Dan Abramov. Instead, let’s dig deeper: what are the reasons behind the rules and pitfalls these experts suggest?

Learning by Building: One of the best ways to understand Redux is to build a simple version yourself. There are many tutorials online, like "Redux in 99 lines," but here, we’ll walk through the official Redux GitHub repo and create our own minimal Redux implementation. This hands-on approach helps build a strong, practical understanding.

Mental Models

Before jumping into code, let’s talk about mental models.

A mental model is simply a way to visualize and understand how something works in your mind.

If you know Josh Comeau, the teacher behind the "Joy of React" course, you’ll know he always starts with a mental model before diving into any topic. His explanations, especially about CSS layout algorithms, are inspiring and make complex topics much easier to grasp.

For example, Josh explains why an <img> tag with a border shows a weird bottom gap. This happens because the <img> tag is display: inline by default. Inline elements are designed for text formatting, so the image is treated like a character in a paragraph, inheriting certain behaviors (like space for descenders). This is also why block-level elements like <h1>, <h2>, <h3>, or <p> have default margins-they’re meant to structure documents.

Visual Example:

Add an image with a border, and you’ll see a gap at the bottom. This is because the image is inline, just like text, and it inherits the same layout rules.

Understanding this mental model makes it clear why some CSS behaviors seem strange at first. Similarly, having a mental model for Redux will help us understand how it works internally and when to use it.

What is Redux?

Redux is like useState()—but for your entire application. It’s that simple.

Think of Redux as a global object with getter, setter, and pure functions that control how values change. Redux gives you a way to store, read, and update data globally in a predictable way.

In a more abstract form, Redux can be described as:

An object (the state),
A setter (dispatch),
A getter (getState),
And everything is pure (no side effects, predictable behavior).

Redux allows you to access and manipulate this central object from anywhere in your app.

Step 01: The Minimal Redux

let obj = { value: 1 };

function getter() { // Redux calls this getState
    return obj;
}

function setter(d) { // Redux calls this dispatch
    obj.value = d;
}

This is the most minimalistic version of Redux. From here, we’ll evolve it step-by-step into something closer to the actual implementation.

Before we continue, check out the official Redux documentation. Redux is built on three core principles:

Single source of truth — The state of your whole application is stored in a single object tree.
State is read-only — The only way to change the state is to emit an action.
Changes are made with pure functions — Reducers are pure functions that take the previous state and an action, and return the next state.

Step 02: Aligning with Redux Concepts

Let’s now apply the three principles to our code, using variable names that align with Redux terminology:

let initialState = { value: 1, name: 'kuyili' };
let currentState = initialState;

function getState() {
    return currentState;
}

function dispatch(d) {
    currentState = { ...d, value: 2 };
}

We’ve renamed and restructured the variables, but dispatch is still too simplistic. We need to improve it. Remember: we’re building a library, not just writing app logic.

When writing app code, you manipulate variables and pass values directly. But in a library, we should focus more on functions. Specifically, functions that:

Take functions as arguments, and
Return functions as results.

Let’s call this idea "Functionable."

I just explained what combineReducers is in Redux. After you finish this article and return to this point, you’ll understand why.

Step 03 – Let's Functionable

We’re now stepping into how Redux really works: by using functions to manage logic, not values. So let’s create a parent function that manages its child functions based on an action type—not by their names, but by using an object like { type: 'ACTION_NAME' }.

// Step 03

function parentFunction(state, action) { // Redux calls her the "reducer"
    switch (action.type) {
        case 'ADD':
            return (); // return updated state here
        case 'SUB':
            return (); // return updated state here
        default:
            return state;
    }
}

function redux() { // Redux calls her the "createStore"

    let initialState = { value: 1, name: 'kuyili' };
    let currentState = initialState;

    function getState() {
        return currentState;
    }

    function dispatch(action) {
        currentState = parentFunction(currentState, action);
        // In Step 04, we’ll add logic here to notify subscribers
    }

    // ...
}

Looks nice, right?

But… we're not currently listening to changes in the state. Let's fix that using closures.

Step 04 – Closure Magic

This implementation is going to give you a clean understanding of subscribers as well as closures.

Closures are often confusing, right? Not really.

Closure is like a power booster, a magic spell, or Popeye’s spinach that gives your functions powers almost like a class component—but it still looks like a function.

Think of it like a function that remembers where it came from and everything around it, even when it's executed elsewhere.

Using closures, we’ll store subscribers (listener functions) in an array, and expose subscribe and unsubscribe features.

// Step 04

function reducer(state, action) {
    switch (action.type) {
        case 'ADD':
            return { ...state, value: state.value + 1 };
        case 'SUB':
            return { ...state, value: state.value - 1 };
        default:
            return state;
    }
}

function createStore(reducer) {

    let state = { value: 1, name: 'kuyili' };
    let listeners = [];

    function getState() {
        return state;
    }

    function dispatch(action) {
        state = reducer(state, action);
        listeners.forEach(listener => listener()); // MAGIC: Notify all subscribers
    }

    function subscribe(listener) {
        listeners.push(listener);
        return function unsubscribe() {
            listeners = listeners.filter(l => l !== listener);
        }
    }

    return {
        getState,
        dispatch,
        subscribe
    };
}

Looks great, right?

To create a subscriber, just call:

const unsubscribe = store.subscribe(() => {
    console.log("State changed!", store.getState());
});

// To unsubscribe later:
unsubscribe();

This is the power of closure: when you call store.subscribe(), it returns an unsubscribe() function that still has access to the original listener and listeners array—even after subscribe() is done executing.

If you look closely, you'll notice one thing was missing earlier: subscribers were not notified on dispatch.

We fixed it by simply adding:

listeners.forEach(listener => listener());

Every time dispatch() is called (i.e. the state is updated), all subscribed listeners are notified.

🧠 Redux Concepts in a Table

API	Description
`compose()`	Combines all middleware (right to left)
`combineReducers()`	Combines all reducers into one
`middleware`	You know what this does!

📂 Stepping into the Redux Codebase

We’re now entering the actual Redux codebase to connect our simplified implementations to real-world source code.

🔖 Why Use a Tag Instead of a Branch?

Tags are stable versions. Branches can change, and files like src/index.ts might be moved or renamed.

At the time of writing, the latest tag is v5.0.1.

Start here:

📁 index.ts — The root that exports all Redux APIs.

You’ll notice we’ve already implemented:

📁 createStore.ts — Our minimal version was a very close match!

🧩 `combineReducers()` – Combining All Reducers

📁 combineReducers.ts

// simplified version
function combineReducers(reducers) {
  return function combination(state = {}, action) {
    const nextState = {};
    let hasChanged = false;

    for (const key in reducers) {
      if (reducers.hasOwnProperty(key)) {
        const previousStateForKey = state[key];
        const nextStateForKey = reducers[key](previousStateForKey, action);
        nextState[key] = nextStateForKey;
        hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
      }
    }

    return hasChanged ? nextState : state;
  };
}

🔍 What's Going On?

reducers is an object of reducer functions.
For each key:
- Get the previous state slice.
- Pass it with action to the corresponding reducer.
- Save the result into nextState.
- If any reducer returns a different state, set hasChanged = true.
Finally, return the new nextState only if it changed, else return the original state.

🔗 `compose()` – Middleware Pipeline

📁 compose.ts

// simplified version
function compose(...funcs) {
  if (funcs.length === 0) {
    return (arg) => arg;
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)));
}

// example
function add5(x) {
  return x + 5;
}

function multiplyBy2(x) {
  return x * 2;
}

function subtract3(x) {
  return x - 3;
}

const composedFunction = compose(subtract3, multiplyBy2, add5);

// Equivalent to: subtract3(multiplyBy2(add5(10)))
console.log(composedFunction(10)); // Output: 27

🔍 What's Going On?

If no functions → return identity function (x => x)
If one function → return that directly
Else → reduce from right to left using:

(...args) => a(b(...args))

So the result of b becomes the input of a, chaining them right-to-left.

API	Purpose
`createStore()`	Core function that holds state and allows dispatching actions
`combineReducers()`	Combines multiple reducers into a single state management function
`compose()`	Combines middleware functions into a single pipeline (right to left)

There are questions that might help you if you research them yourself, such as:

How is Redux different from having your own class and using it, like exporting it?
How is Redux different from an Angular service?
How is Redux different from localStorage in a web browser?
Will this mental model and understanding help me understand the useSelector() implementation in the react-redux codebase? Here is the link. #### What's Next?

After playing with Redux and its codebase, the next step would be to explore React. Honestly, I couldn't understand the React source code very well. I spent more than two weeks trying to get a grasp of it, and I was only able to run the tests in thereact-scheduler folder. Even then, I couldn't understand the code clearly.

Anyway, I moved on to the Preact source code, which has been really exciting. Why? Because if you go to their codebase, you'll see the implementation is really cool:

useState is built on top of useReducer under the hood.
useRef and useCallback are built on top of useMemo under the hood.

Interesting, right? Simply examining their implementation gives us a deeper understanding of how to use these hooks effectively. The devil is in the details. Happy hacking!

If any of the information above is incorrect, please let me know at inboxtome26@gmail.com, and I'll make the necessary changes.

Master Key React Concepts Easily Through One Simple Game

Thamizh Arasan — Tue, 29 Apr 2025 09:49:47 +0000

When starting your journey with React, you'll encounter countless tutorials and project ideas. However, the humble tic-tac-toe game from React's official documentation isn't just another example—it's a masterclass in React fundamentals disguised as a simple project. Let me show you why this tutorial is the perfect learning experience for any React beginner.

The Perfect Microcosm of React Fundamentals

The tic-tac-toe tutorial elegantly introduces nearly every core React concept in a single, approachable project:

1. JSX Fundamentals

JSX is React's syntax extension that allows you to write HTML-like code within JavaScript. The tic-tac-toe game gives you hands-on experience with:

// JSX example from React's tic-tac-toe tutorial
function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Notice how:

HTML-like syntax is used within JavaScript
JavaScript expressions are embedded within curly braces ({value})
We use className instead of class (a key React convention)
Event handlers are passed as props (onClick={onSquareClick})

These fundamentals appear in virtually every React component you'll ever build.

2. Component Structure and Composition

The game teaches you how to break a UI into logical components:

// The Board component from the tutorial
export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  function handleClick(i) {
    // Logic for handling clicks...
  }

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      {/* More rows... */}
    </>
  );
}

You'll learn to:

Create reusable functional components
Compose larger interfaces from smaller components
Structure your application logically

3. Props and Data Flow

The tutorial beautifully demonstrates React's unidirectional data flow:

// Passing data down through props
<Square 
  value={squares[0]} 
  onSquareClick={() => handleClick(0)} 
/>

Here you can see:

Data (value) flows down from parent to child
Event handlers are passed down to allow children to communicate up
Components stay focused on their specific responsibilities

4. State Management with useState Hook

Perhaps the most critical React concept is state management, and the tic-tac-toe game provides perfect practice:

// State declarations in the Game component
const [history, setHistory] = useState([Array(9).fill(null)]);
const [currentMove, setCurrentMove] = useState(0);
const xIsNext = currentMove % 2 === 0;
const currentSquares = history[currentMove];

function handlePlay(nextSquares) {
  const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
  setHistory(nextHistory);
  setCurrentMove(nextHistory.length - 1);
}

This demonstrates:

Creating state with useState
Updating state immutably
Deriving values from state (xIsNext)
Creating complex state structures (array of arrays)

5. Lifting State Up

The tutorial teaches you when and how to "lift state up" to parent components:

// In the Game component, state is lifted up from Board
export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  // ...

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      {/* Move history UI... */}
    </div>
  );
}

This pattern is crucial for:

Sharing state between components
Maintaining a single source of truth
Keeping components in sync

6. Conditional Rendering

The game illustrates how to render content conditionally:

// Determining and displaying game status
let status;
if (winner) {
  status = "Winner: " + winner;
} else {
  status = "Next player: " + (xIsNext ? "X" : "O");
}

return (
  <>
    <div className="status">{status}</div>
    {/* Board rendering... */}
  </>
);

Why This Tutorial Is Exceptional

What makes the tic-tac-toe tutorial uniquely valuable is how it integrates these concepts naturally. Rather than learning them in isolation, you see how they work together in a real (albeit simple) application.

Practical Application of Theory

Each concept is immediately applied to solve a real problem:

State tracks the game board and player turns
Props pass data and callbacks between components
Event handlers process user interactions
Conditional rendering shows game status

Gradual Complexity

The tutorial builds complexity gradually:

Start with a static square component
Add interactivity with state
Lift state up for coordination
Add game history and time travel

This progression mirrors how you'll build real applications—starting simple and iteratively adding complexity.

Taking Your Learning Further

After completing the basic tutorial, challenge yourself with these extensions (suggested in the React docs):

Display move locations: Enhance the move history to show the coordinates:

// Example implementation
function buildMoveDescription(move, squareIndex) {
  if (move === 0) return "Game start";

  const row = Math.floor(squareIndex / 3) + 1;
  const col = (squareIndex % 3) + 1;
  return `Move #${move}: (${row}, ${col})`;
}

Highlight winning squares:

function Square({ value, isWinningSquare, onSquareClick }) {
  return (
    <button 
      className={`square ${isWinningSquare ? "winning" : ""}`} 
      onClick={onSquareClick}
    >
      {value}
    </button>
  );
}

Add a toggle for move order:

const [isAscending, setIsAscending] = useState(true);

// Later in render:
<button onClick={() => setIsAscending(!isAscending)}>
  {isAscending ? "Sort Descending" : "Sort Ascending"}
</button>

// Then sort moves accordingly:
const sortedMoves = isAscending ? moves : [...moves].reverse();

Conclusion: A Deceptively Powerful Learning Tool

The tic-tac-toe game may seem simple, but it's a brilliantly designed educational tool that covers virtually every fundamental React concept. It strikes the perfect balance—complex enough to teach real-world skills, yet simple enough to complete in a single sitting.

As you work through this tutorial, you'll gain:

Practical experience with React's core concepts
A mental model for component-based architecture
The ability to manage state effectively
Experience with debugging React applications

Before diving into complex projects or additional libraries like Redux, take the time to thoroughly understand the tic-tac-toe tutorial. The patterns you learn here form the foundation of React development and will serve you in every project you tackle.

Remember: mastering fundamentals is far more valuable than rushing into advanced topics. The time you invest in understanding this deceptively simple game will pay dividends throughout your React journey.

Happy coding!

🧠 Debugging React Internals: Why I Started Cloning Functions and Objects (Seriously)

Thamizh Arasan — Tue, 15 Apr 2025 15:25:59 +0000

“To understand the code, you must *live in the code.”*

— A React explorer with console.log as his compass

Where it all began... 🌱

When I decided to truly understand how React works under the hood — not just use it, but really get it — I didn’t know where to begin. There was no roadmap. No “Start Here” sign.

So I did what any curious developer would do.

I opened the React source and started randomly sprinkling console.log() like confetti 🎉

And then... I discovered something curious.

If you’ve ever used React, you know we usually begin with:

ReactDOM.render(<App />, document.getElementById('root'));

So I placed a console.log() right before and after ReactDOM.render(). And what I saw in the Chrome DevTools console blew my mind 🤯

It looked like the Fiber tree had already been constructed immediately after calling ReactDOM.render().

But wait... that’s impossible.

I added console.log() inside the createFiber() function later — and that was called only afterwards.

Something didn’t add up.

🪞 The Console Illusion

Here’s the trap I fell into — and maybe you have too:

const obj = {};
console.log(obj);
obj.prop = 123;

Now, what do you think Chrome’s console shows?

Just {}?

Nope. You get something like {prop: 123} with a little blue “i” icon next to it. Why?

Because console.log() doesn’t snapshot the object at the time of logging. It logs a reference. The console lazily evaluates and renders it later — after it’s mutated.

So all my logs during React Fiber construction?

They showed the state of the object after mutation, not when the log happened. It was a time-traveling illusion ⏳✨

💡 MDN Knows This Too

MDN even talks about this in their docs:

🔗 Outputting text to the console - MDN

And their suggested workaround?

console.log(JSON.parse(JSON.stringify(obj)));

Sure, this works for plain objects. But when you're navigating the jungles of React internals — you're not just dealing with objects.

You're dealing with HTMLElements, linked lists, Fibers, Functions, and a whole zoo of entities.

🧬 When cloning gets serious...

Let’s take HTML elements. JSON.stringify()? Doesn’t work.

Instead, you might use:

console.log(node.cloneNode(true));

Works better. But what about Fiber nodes? They’re not regular objects. They contain functions, cyclic references, and complex structures.

That’s where my favorite weapon comes in:

`lodash.cloneDeep()` 🔥

import cloneDeep from 'lodash/cloneDeep';

console.log(cloneDeep(fiberNode));

It just works. Deeply. Recursively. Reliably.

It can clone:

✅ HTMLElements

✅ Functions (to an extent)

✅ Cyclic structures

✅ React's Fiber nodes

It helped me capture the actual shape of Fiber at the exact moment it was being created — not the shape it had later.

And when you're debugging the internals of React, that's everything.

🛠️ So, when should you clone a function or an object?

Here's the takeaway:

If you're debugging or logging, and you care about the exact state at the time of execution, clone it.
If you’re dealing with complex data (DOM nodes, Fibers, functions), JSON.stringify() will fail silently or just skip important parts.
For React internals and anything non-trivial: cloneDeep() is your best friend.

✨ Final Thoughts

Sometimes the tools we use to understand the system can deceive us.

React is magical — but to truly learn its magic, you need to look past the illusions.

“We don’t get to the truth by looking at the output. We get there by understanding the process.”

— Me, probably after 10 cups of coffee ☕️

Whether you’re hacking React internals, reverse-engineering Fiber, or just debugging a mysterious bug — clone consciously.

🧪 Inspect deeply.

🧠 Think like the framework.

🚀 Learn beyond the docs.

ReactJS Internals #1

Thamizh Arasan — Mon, 17 Mar 2025 13:15:34 +0000

Why Do We Need ReactJS or Any JavaScript Library?

When we click on an anchor tag in a traditional website, the browser reloads the entire page. This isn't ideal for SaaS products, where speed and smooth user experience are crucial.

ReactJS (or similar libraries) solves this by maintaining a virtual representation of the DOM—an object-based structure that mirrors the actual HTML DOM. Instead of reloading the entire page on every interaction, React updates only the necessary parts.

This optimization is powered by React Fiber, which efficiently reconciles changes and schedules updates. The process of identifying and applying these changes is handled by UnitOfWork(), ensuring that only the modified elements are updated on the screen, keeping performance smooth and efficient.

This approach makes ReactJS a powerful choice for building dynamic and responsive SaaS applications.

DEV Community: Thamizh Arasan

Not Just Another Redux Article: Learning Redux from Its Source Code

Mental Models

What is Redux?

Step 01: The Minimal Redux

Step 02: Aligning with Redux Concepts

Step 03 – Let's Functionable

Step 04 – Closure Magic

🧠 Redux Concepts in a Table

📂 Stepping into the Redux Codebase

🔖 Why Use a Tag Instead of a Branch?

🧩 combineReducers() – Combining All Reducers

🔗 compose() – Middleware Pipeline

🔍 What's Going On?

Master Key React Concepts Easily Through One Simple Game

The Perfect Microcosm of React Fundamentals

1. JSX Fundamentals

2. Component Structure and Composition

3. Props and Data Flow

4. State Management with useState Hook

5. Lifting State Up

6. Conditional Rendering

Why This Tutorial Is Exceptional

Practical Application of Theory

Gradual Complexity

Taking Your Learning Further

Conclusion: A Deceptively Powerful Learning Tool

🧠 Debugging React Internals: Why I Started Cloning Functions and Objects (Seriously)

Where it all began... 🌱

🪞 The Console Illusion

💡 MDN Knows This Too

🧬 When cloning gets serious...

lodash.cloneDeep() 🔥

🛠️ So, when should you clone a function or an object?

✨ Final Thoughts

ReactJS Internals #1

🧩 `combineReducers()` – Combining All Reducers

🔗 `compose()` – Middleware Pipeline

`lodash.cloneDeep()` 🔥