DEV Community: sojin antony

I Built 21 Free Brain Training Games for Kids & Adults Using React & TypeScript — And the…

sojin antony — Sun, 01 Mar 2026 07:20:13 +0000

🧠 I Built 21 Free Brain Training Games for Kids & Adults Using React & TypeScript — And the Science Behind Why They Work

Why I Built This: A Game Collection Made for Growing Minds

My motivation was simple: kids learn best when they’re having fun.

I wanted to create something that parents could open on any device — a phone, a tablet, a laptop — hand it to their child, and know that what they’re playing is actually good for their brain. Not mindless tapping. Not pay-to-win mechanics. Not a data-harvesting machine disguised as an educational app.

I wanted games that:

🎮 Feel genuinely fun and engaging for kids aged 6 and up
🧠 Are grounded in real cognitive science and neuropsychology
📱 Work on any device without installation
🔒 Collect zero personal data — not even an email address
💸 Cost absolutely nothing, now and forever

So I built Brain Development Games — a completely free, open-source collection of 21 scientifically-inspired cognitive training games with no ads, no tracking, and no paywalls. Every single level is free. Forever. For everyone.

Whether you’re a parent looking for screen time that actually benefits your child, a teacher wanting classroom-ready brain exercises, or an adult who wants to keep their mind sharp — this app was built for you.

👉 [Play it now → sojinantony01.github.io/brain-development-games](https://sojinantony01.github.io/brain-development-games**)**

— -

The Problem With Most Brain Training Apps

If you’ve ever downloaded a brain training app, you know the drill: a few free levels, then a paywall. Premium subscriptions. Ads every 30 seconds. Your data being sold to third parties.

Kids’ educational apps are even worse — flashy designs hiding aggressive monetization, dark patterns pushing in-app purchases, and “free” games that are anything but.

I got tired of it.

— -

What Is Brain Development Games?

Brain Development Games is a web application built with React 18, TypeScript , and Tailwind CSS. It features 21 different cognitive training games, each with 10 progressive difficulty levels — that’s 210 total levels of brain-challenging gameplay.

The games are grouped into four cognitive domains:

🧩 Logic & Problem Solving — 7 games
🧠 Memory & Attention — 7 games
🎯 Cognitive Flexibility & Speed — 6 games
🧪 Advanced Cognitive Skills — 1 game

All your progress is saved automatically to your browser’s local storage. No account needed. No data leaves your device.

— -

The Science: Why These Games Actually Work

Before diving into the games themselves, let’s talk about the research. Cognitive training has been studied extensively in neuroscience and psychology. Here’s what the science says about the specific training methods used in this app:

1. Working Memory Training (N-Back Task)

The N-Back task is one of the most studied cognitive training paradigms. Research published that N-Back training can improve fluid intelligence — the ability to reason and solve novel problems. The task requires you to remember items from N steps back in a sequence, directly exercising your working memory capacity.

2. The Stroop Effect

The Stroop Test is a classic psychological phenomenon discovered in 1935. When the word “RED” is written in blue ink, your brain experiences cognitive interference — it takes longer to name the color than to read the word. Regular Stroop training improves inhibitory control and selective attention , key components of executive function.

3. Spatial Reasoning & Mental Rotation

Mental rotation tasks have been shown to improve spatial visualization abilities. Studies show that people who regularly practice mental rotation show measurable improvements in STEM-related spatial reasoning tasks.

4. Executive Function Training

Games like Tower of Hanoi and Trail Making directly target executive functions — planning, cognitive flexibility, and task-switching. These are the same tests used by neuropsychologists to assess frontal lobe function.

5. Dual-Task Training

The Dual Task Challenge requires you to perform two cognitive tasks simultaneously. Research shows that dual-task training can improve divided attention and reduce the cognitive cost of multitasking.

— -

All 21 Games — Explained

🧩 Logic & Problem Solving

💧 Water Jugs

A classic puzzle where you must measure exact amounts of water using jugs of different capacities. You can fill, empty, or pour between jugs. This game trains logical planning and resource management — the same type of thinking used in algorithm design.

🗼 Tower of Hanoi

Move all disks from one peg to another, following the rule that a larger disk can never sit on a smaller one. The optimal solution requires 2ⁿ — 1 moves. This game is a direct exercise in recursive thinking and strategic planning.

🎨 Ball Sort Puzzle

Sort colored balls into tubes so each tube contains only one color. A deceptively simple premise that requires deep forward planning and logical sequencing.

🌀 Pathway Maze

Navigate through increasingly complex mazes from start to finish. Higher levels feature larger, more intricate mazes that demand spatial planning and strategic forecasting.

🔗 Trail Making

Connect numbered circles in sequence, then alternate between numbers and letters (1-A-2-B-3-C…). This is a direct adaptation of the Trail Making Test used in clinical neuropsychology to assess cognitive flexibility.

🧩 Logic Puzzles

Step-by-step reasoning challenges with multiple variations. These puzzles require analytical thinking and the ability to work backwards from a desired outcome.

🔢 Number Sequence

Identify the pattern in a sequence of numbers and predict the next value. Patterns range from simple arithmetic to Fibonacci sequences and beyond. Trains pattern recognition and mathematical reasoning.

— -

🧠 Memory & Attention

🔢 N-Back

The gold standard of working memory training. Watch a sequence of letters or numbers and press a button when the current item matches the one from N positions back. Scientifically proven to enhance working memory capacity and potentially f luid intelligence.

🎨 Stroop Test

See a color word (like “BLUE”) written in a different color (like red). Your job is to identify the color of the text, not what the word says. Trains cognitive control and selective attention.

🔲 Pattern Matrix

Study a pattern of highlighted cells on a grid, then recreate it from memory after it disappears. Strengthens visual memory and spatial pattern recognition.

📊 Schulte Table

Numbers are randomly arranged in a grid. Click them in sequential order as fast as possible. Used by speed readers and athletes to improve peripheral vision and processing speed.

🎵 Simon Says

Watch a sequence of colored buttons light up, then repeat the sequence. Each round adds one more color. The classic memory game that improves sequential recall and auditory-visual memory.

🃏 Card Matching

The classic concentration game. Flip cards to find matching pairs, remembering the positions of cards you’ve already seen. Trains visual memory and spatial attention.

🧩 Working Memory Grid

Watch cells light up on a grid, then click the correct positions from memory. A direct exercise in spatial working memory and visual retention.

— -

🎯 Cognitive Flexibility & Speed

🔄 Mental Rotation

See a reference shape and a rotated version. Determine if it’s the same shape (just rotated) or a mirror image. Develops spatial reasoning and 3D visualization abilities.

➕ Quick Math

Solve arithmetic problems under time pressure. Addition, subtraction, multiplication, division — all against the clock. Boosts mental calculation speed and numerical fluency.

📝 Word Scramble

Unscramble letters to form valid words before time runs out. Enhances verbal fluency , spelling , and linguistic pattern recognition.

⚡ Reaction Time

Wait for the screen to change color, then click as fast as possible. Measures and trains your reflexes and response speed in milliseconds.

🔍 Visual Search

Find target shapes hidden among distractors as quickly as possible. Improves visual scanning efficiency and selective attention.

🎯 Anagram Solver

Rearrange scrambled letters to form words under time pressure. Enhances linguistic flexibility and problem-solving speed.

— -

🧪 Advanced Cognitive Skills

🎭 Dual Task Challenge

The most cognitively demanding game. Count shapes while simultaneously solving math problems. Tests divided attention and multitasking ability — the hallmark of advanced executive function.

— -

Key Features That Make This App Different

✅ 210 Total Levels of Progressive Difficulty

Every game has 10 levels that gradually increase in complexity. You’re never thrown into the deep end, but you’re always being challenged.

✅ Local Progress Tracking

Your scores and progress are automatically saved to your browser’s localStorage. No account, no sign-up, no email required.

✅ Local Leaderboard

Track your best performances across all games. Compete against your own past scores.

✅ Fully Responsive Design

Works perfectly on desktop, tablet, and mobile. Play during your commute, lunch break, or evening wind-down.

✅ Privacy-First Architecture

Zero data collection. Zero tracking. Zero ads. Everything stays on your device.

✅ PWA Support

Install it on your phone’s home screen like a native app. Works offline once loaded.

✅ Share Your Results

Share your achievements on social media directly from the app.

— -

The Tech Stack

For the developers reading this, here’s what powers the app:

⚛️ React 18.2 — UI framework
🔷 TypeScript 5.4 — Type safety
🎨 Tailwind CSS 4.1 — Styling
⚡ Vite — Build tool (fast dev & production builds)
🌐 GitHub Pages — Free hosting & deployment

The architecture is clean and modular:

brain-development-games/
├── src/
│ ├── games/
│ ├── pages/
│ ├── components/
│ └── lib/
├── public/
│ ├── sitemap.xml
│ ├── robots.txt
│ └── manifest.json

Each game is a self-contained React component. Adding a new game is as simple as creating a new component and registering it in the central game registry.

— -

How to Get Started in 3 Steps

Step 1: Visit sojinantony01.github.io/brain-development-games

Step 2: Pick a game that interests you. Not sure where to start? Try these based on your goal:

Improve memory → Start with N-Back or Simon Says
Sharpen focus → Try the Stroop Test or Schulte Table
Boost logic → Tower of Hanoi or Water Jugs
Increase speed → Reaction Time or Quick Math

Step 3: Play daily for 15–20 minutes. Consistency is the key to cognitive improvement.

— -

Benefits of Regular Brain Training

Research and user experience both point to these benefits with consistent practice:

✅ Improved working memory capacity — Hold more information in mind at once
✅ Enhanced attention and focus — Resist distractions more effectively
✅ Faster problem-solving — Approach challenges with greater mental agility
✅ Increased processing speed — Think and react more quickly
✅ Stronger mental flexibility — Switch between tasks with less cognitive cost
✅ Better spatial reasoning — Visualize and manipulate objects mentally

— -

Who Is This For?

👦 Kids (Ages 6+)

The games are designed to be intuitive and fun. Children can start with Simon Says, Card Matching, or Pattern Matrix — games that feel like play but build real cognitive skills. No reading required for most games. No frustrating difficulty spikes. Just progressive, rewarding challenges that grow with them.

👨‍👩‍👧 Parents

Give your kids screen time you can feel good about. Every game in this collection is backed by cognitive science. No ads will pop up. No purchases will be prompted. No data will be collected. Just pure, beneficial brain exercise.

🏫 Teachers & Educators

Use these games as classroom warm-ups, focus exercises, or reward activities. The Schulte Table is great for improving reading speed. Trail Making tests cognitive flexibility. N-Back builds working memory — all skills that directly translate to academic performance.

🎓 Students

Preparing for exams? Regular N-Back training has been shown to improve fluid intelligence. Quick Math sharpens numerical fluency. Word Scramble and Anagram Solver boost verbal reasoning. 15 minutes a day can make a measurable difference.

💼 Professionals

High-stakes jobs demand peak cognitive performance. The Dual Task Challenge, Stroop Test, and Reaction Time games are used in research settings to measure executive function — the same skills that drive performance under pressure.

🧓 Seniors

Keeping the mind active is one of the best things you can do for long-term cognitive health. These games offer gentle, engaging mental exercise with no technical barriers. Just open a browser and play.

👨‍💻 Developers & Open Source Contributors

The codebase is clean, modular, and well-structured. Adding a new game takes less than an hour. Fork it, extend it, make it your own.

— -

It’s Open Source — Contribute!

The entire project is open source under the MIT License. You can:

🐛 Report bugs on GitHub Issues
💡 Suggest new games or features
🔧 Submit pull requests to fix bugs or add features
🎮 Build new games — the architecture makes it easy

GitHub Repository: github.com/sojinantony01/brain-development-games

Want to run it locally?

git clone https://github.com/sojinantony01/brain-development-games.git
cd brain-development-games
npm install
npm run dev

— -

Final Thoughts

The brain is a muscle. Like any muscle, it grows stronger with the right kind of exercise. The difference between brain training and physical training? You don’t need a gym membership, expensive equipment, or a personal trainer.

You just need a browser.

Brain Development Games gives you 21 scientifically-grounded cognitive challenges, 210 levels of progressive difficulty, and a completely free, private, ad-free experience. There’s no reason not to start today.

Your future self — sharper, faster, more focused — will thank you.

— -

👉 [Start Training Your Brain Now →](https://sojinantony01.github.io/brain-development-games**)**

⭐ [Star the repo on GitHub](https://github.com/sojinantony01/brain-development-games**)** if you find it useful!

— -

Built with ❤️ for cognitive development. 100% free. 100% open source. No ads. No tracking.

This project was built with the help of. Bob — an AI-powered coding assistant. From writing game logic to SEO setup, Bob made the entire development process faster and smarter.

[Boost]

sojin antony — Fri, 27 Feb 2026 17:22:02 +0000

I Built a Full-Stack Family OS — Web App + Mobile App with Video Calls, Brain Games, Expenses & More

Bibin Antony ・ Feb 27

#devchallenge #weekendchallenge #showdev #webdev

Critical Thinking for Technical Teams — Part 2

sojin antony — Sun, 14 Dec 2025 14:16:18 +0000

🧠 Critical Thinking for Technical Teams — Part 2

Read part-1 first — https://dev.to/sojinantony01/critical-thinking-for-technical-teams-a-practical-guide-2h77

How to Stay AI-Proof with Daily Practice

Introduction: Why This Matters

In the AI era, weak critical thinking makes technical roles vulnerable to automation.

Not because AI is smarter, but because it is extremely good at executing clear instructions — while many humans only follow instructions without questioning them.

Critical thinking separates:

Task executors → most replaceable by AI
Problem owners → amplified by AI

The good news: critical thinking is learnable, and you can practice it daily — even in ordinary situations like traffic.

The Critical Thinking Loop (from Part 1)

A simple, repeatable loop:

Clarify Goal → Gather Facts → Identify Assumptions → Generate Options → Evaluate Trade-offs → Decide → Reflect

In this article, we apply the same loop to:

A traffic problem (real life)
A technical incident (work life)

Same thinking. Different context.

Scenario Setup

Traffic scenario

You’re driving. A vehicle ahead breaks down and blocks the road.

Technical scenario

You’re on call. A production service goes down and users are blocked.

Both situations share:

Progress is blocked
Information is incomplete
Multiple options exist
Decisions affect other people

Step 1: Clarify the Goal

Traffic

Reach destination safely
Minimize unnecessary delay
Avoid creating new risk

Technical

Restore service safely
Minimize user and business impact
Avoid cascading failures

❌ Reactive thinking focuses on urgency

✅ Critical thinking focuses on the real outcome

Step 2: Gather Facts

Traffic facts

Vehicle ahead is stopped
Traffic is building behind
Passengers may be stranded
Road and visibility conditions matter

Technical facts

Service is unavailable
Users cannot access the system
Recent deployment occurred
Error logs show failures

Key: Only facts — no interpretation yet.

Step 3: Identify Assumptions

Traffic assumptions

“The delay will be long”
“Someone else will help”
“Helping will waste time”

Technical assumptions

“The database is the root cause”
“Restart will fix everything”
“Rollback is always safest”

Critical thinkers surface assumptions before acting on them.

Step 4: Generate Options

Traffic options

Wait and observe
Change lanes if possible
Reroute via another road
Help push the vehicle
Assist passengers to the next bus stop
Call roadside assistance or traffic police

Technical options

Restart services
Roll back deployment
Fail over to backup systems
Scale resources
Communicate outage to users
Investigate root cause first

Key: Expand the solution space before judging.

Step 5: Evaluate Trade-offs

Traffic trade-offs

Time vs safety
Effort vs collective benefit
Personal delay vs helping others

Examples:

Waiting delays everyone
Rerouting costs time but clears flow
Helping the vehicle benefits many with moderate effort
Assisting passengers prioritizes human safety

Technical trade-offs

Speed vs stability
Temporary relief vs long-term correctness
Silent recovery vs user trust

Examples:

Restarting is fast but risky
Rollback is slower but safer
Failover protects users but costs resources

Critical thinking is trade-off management — not speed.

Step 6: Decide (Based on Conditions)

Traffic decisions

Plenty of time & safe to stop → Help move the vehicle and assist passengers
Slight delay, help is quick → Push vehicle aside and continue
Unsafe to stop (highway, poor visibility) → Call authorities and reroute
Personal emergency → Reroute and delegate help

Technical decisions

High business impact → Roll back immediately
Minor issue → Restart and monitor
High uncertainty or risk → Failover and communicate clearly

There is no universal “right” answer — only contextually sound decisions.

Step 7: Reflect

After action, ask:

Was the decision effective?
Were assumptions challenged?
Were trade-offs evaluated properly?
What should change next time?

Reflection turns actions into judgment and instinct.

Why This Matters for Engineers

Traffic situations map directly to engineering work:

Vehicle stalled → Production incident
Helping passengers → Supporting users or teammates
Unsafe to stop → High-risk deployment
Rerouting → Alternative architecture
Observing first → Gathering metrics and logs

AI can execute actions.

Only humans can evaluate context, ethics, and impact together.

How to Practice This Daily

You don’t need monthly exercises or extra time.

Run the same loop in:

Traffic
Meetings
Debugging
Incident response
Design reviews

With repetition, it becomes instinctive.

Train Yourself to Improve Problem-Solving and Critical Thinking Skills

Critical thinking does not improve automatically with experience.

Many people face problems every day —

but repeat the same thinking mistakes for years.

The difference between average and strong thinkers is deliberate practice.

Just like:

You don’t become a better coder by only writing code
You don’t become better at debugging without reviewing your mistakes

You don’t become a better thinker without consciously training how you think.

Stop Waiting for “Important Problems”

A common mistake among technical professionals:

“I’ll apply critical thinking when the problem is big.”

By then, it’s too late.

High-pressure situations expose your existing thinking habits —

they don’t magically improve them.

Strong critical thinkers train on small, low-risk problems , so that good thinking becomes automatic when stakes are high.

Use Everyday Life as a Training Ground

Daily life provides constant, free practice opportunities:

Traffic delays
Missed buses or trains
Unclear instructions
Slow teammates
Conflicting priorities
Small bugs that “shouldn’t happen”

These situations are perfect because:

The cost of mistakes is low
Emotions still exist
Trade-offs are real

Exactly like technical work.

Example: Traffic as a Thinking Gym

You are stuck because a vehicle broke down ahead.

Instead of reacting emotionally, train your thinking :

What is my real goal?
What facts do I actually know?
What am I assuming without proof?
What options exist beyond “wait” or “get angry”?
What trade-offs am I making (time, safety, effort, humanity)?

Each time you do this consciously, you strengthen:

Problem framing
Decision quality
Emotional control
Ethical judgment

Translate the Same Training to Technical Work

The exact same mental training applies at work:

Bug appears → don’t jump to fix
Incident happens → don’t blame immediately
Design disagreement → don’t defend instinctively

Pause and ask:

What is the real goal here?
What do we know vs assume?
What alternatives exist?
What are we optimizing for?

This is problem-solving training , not just task completion.

Turn Problems into Practice Repetitions

Think like this:

Every traffic delay = 1 rep
Every production issue = 10 reps
Every post-mortem = strength training

You are not just solving the problem —

you are training your judgment.

Over time:

Your reaction time improves
Your assumptions surface faster
Your decisions become calmer and clearer
Others start trusting your judgment

That is senior-level thinking.

Reflection Is Mandatory for Growth

Training without reflection plateaus quickly.

After any meaningful decision, ask:

What assumption was wrong?
What option did I ignore?
What would I do differently next time?

Even 30 seconds of reflection compounds faster than months of unexamined experience.

Why This Training Makes You AI-Resistant

AI improves by consuming massive datasets.

Humans improve by:

Reflecting on experience
Applying judgment across contexts
Balancing ethics, impact, and uncertainty

If you train your thinking deliberately:

You move from executor → decision maker
From problem solver → problem owner
From replaceable → irreplaceable

One Rule to Remember

Don’t wait for big problems to practice critical thinking.

Train on small ones so big decisions feel natural.

Mini Checklist

✅ Clarify the goal before reacting
✅ Separate facts from assumptions
✅ Generate at least three options
✅ Reflect after major decisions

Final Thought & Call to Action

AI is not replacing engineers.

AI is replacing people who execute without thinking.

Next time you’re stuck — in traffic or in production — pause and run the loop:

Goal → Facts → Assumptions → Options → Trade-offs → Decision → Reflection

If you sharpen your judgment,

AI won’t replace you — it will amplify you.

Critical Thinking for Technical Teams: A Practical Guide

sojin antony — Sun, 14 Dec 2025 09:06:30 +0000

How structured reasoning transforms debugging, planning, and collaboration

In software and engineering teams, we often know where we are and where we want to be — but the path between those two points is rarely obvious. Systems are complex, requirements evolve, data is incomplete, and decisions must be made under time pressure.

This is where critical thinking makes a real difference.

Critical thinking is not about being argumentative or over-analytical. It is about reasoning deliberately , slowing down when needed, and making decisions based on evidence rather than assumptions or intuition alone.

While this guide is written for technical teams, the principles apply to any group that wants to solve problems smarter, not harder.

What Is Critical Thinking?

Critical thinking is structured reasoning : deliberately analyzing facts, questioning assumptions, evaluating alternatives, and choosing actions based on evidence and logic. It is not about being clever or overthinking — it is about being clear, disciplined, and intentional.

It also involves:

Interpreting information correctly
Recognizing gaps and uncertainty
Being aware of cognitive biases
Communicating reasoning clearly to others

In practice, critical thinking means resisting the urge to jump to the first solution that feels right and instead asking:

What do we actually know?
What are we assuming?
What evidence supports this decision?

Why it matters for technical teams

In technical environments, weak reasoning rarely fails loudly at first. Instead, it shows up as:

Repeated production issues
Over-engineered or under-designed systems
Long and frustrating debugging cycles
Unproductive design discussions
Decisions driven by hierarchy rather than evidence

Strong critical thinking leads to:

Faster root-cause analysis
Better architectural and design decisions
Clearer trade-offs between performance, cost, and time
Healthier technical discussions
Fewer reworks and regressions

Ultimately, critical thinking improves both technical outcomes and team culture.

The Core Principles

Clarity — Define the problem, goal, constraints, and success criteria
Analysis — Break the problem down; identify inputs, outputs, and dependencies
Evaluation — Compare trade-offs, risks, and alternatives
Logic — Test hypotheses with evidence and consistent reasoning
Creativity — Expand the solution space beyond default or familiar options
Reflection — Learn from outcomes to improve future decisions

Strong engineers don’t skip steps — they make them explicit.

A Simple Framework You Can Use

This lightweight framework works for debugging, design, incidents, and planning.

Steps:

Define the goal — What exactly needs to be achieved?
List known facts — What data, logs, metrics, or constraints do we have?
Identify gaps — What is unknown? What assumptions are we making?
Generate possible paths — Brainstorm multiple solutions or hypotheses
Evaluate & choose — Compare options using evidence and trade-offs
Reflect — Review outcomes and capture learning

This prevents jumping straight to fixes before understanding the problem.

Example 1: The Bucket Puzzle (5L & 3L → 4L)

A classic logic puzzle that demonstrates structured reasoning.

Goal: Measure exactly 4 liters using a 5-liter bucket and a 3-liter bucket.

Reasoned Steps:

Fill the 3L bucket and pour into the 5L bucket (5L: 3L)
Refill the 3L bucket
Pour into the 5L bucket until full (leaving 1L in the 3L bucket)
Empty the 5L bucket
Pour the remaining 1L into the 5L bucket
Refill the 3L bucket
Pour into the 5L bucket → 4L achieved

Lesson: The solution emerges from constraints + sequencing , not trial-and-error.

Example 2: Debugging a Production Mystery

Scenario: An API returns incorrect data. Logs show no errors.

Apply the framework:

Goal: API responses must match expected data
Facts: No errors; issue affects specific endpoints; started after last deployment
Gaps: Cache behavior? ORM mapping? Schema changes? Query correctness?
Possible paths:
Inspect recent code changes
Run DB queries manually
Verify cache keys and invalidation
Review serialization and mapping layers
Evaluate & choose: Start with the most likely and cheapest-to-test hypotheses

Lesson: Debugging is hypothesis testing, not random code changes.

Example 3: Chess — The Ultimate Critical Thinking Game

Chess mirrors engineering decision-making:

Goal: Checkmate
Facts: Board state and rules
Gaps: Opponent’s future moves
Paths: Multiple legal moves each turn
Evaluation: Trade-offs between material, position, tempo
Reflection: Learn from losses and mistakes

Every move in chess is a decision under constraints — just like system design.

Where Critical Thinking Shows Up Daily

Critical thinking is not limited to big architectural decisions. It appears in everyday work:

Solution design: Speed vs scalability vs maintainability
Problem solving: From flaky tests to production incidents
Ticket scoping: Clarifying ambiguous requirements and edge cases
Planning: Sequencing dependencies and balancing impact vs effort
Team discussions: Resolving disagreements with facts and reasoning

Teams that think critically communicate better because discussions focus on reasoning , not ego.

Tactics You Can Start Using Today

Write assumptions explicitly in PRs and design docs
Form hypotheses before changing code; track what you tested
Use Architectural Decision Records (ADR) for key decisions
Model trade-offs with simple matrices (cost, latency, complexity)
Run pre-mortems: “How could this fail?”
Reflect after incidents: What signals mattered? What would catch this earlier?

Key Takeaways

Critical thinking = structured reasoning + creativity
Make goals, facts, and assumptions explicit
Choose paths using evidence — not hunches
Reflection compounds team judgment over time

Call to Action

Apply this framework to your next ticket, design review, or incident. Share one insight with your team — and make better decisions together.

How I Built a Lightning-Fast Excel-Like Spreadsheet in React (That Renders 100,000+ Cells!)

sojin antony — Thu, 25 Sep 2025 16:35:30 +0000

By Sojin Antony

When I started building react-spread-sheet-excel, my goal was simple: create a spreadsheet component for React that could handle massive datasets without choking the browser. Most existing solutions either lacked performance, flexibility, or essential features like formula support and export/import. So I built my own.

Here’s the story behind it — the challenges, the architecture, and how it can help you build powerful spreadsheet-like interfaces in React.

🧠 The Idea: Why Another Spreadsheet Component?

React is amazing, but rendering thousands of DOM elements can quickly become a bottleneck. I wanted a component that could:

Render 100,000+ input cells without lag
Support Excel-style formulas
Allow rich formatting (bold, italic, font size, etc.)
Enable CSV/XLSX export and import
Provide keyboard navigation , undo/redo, and cell merging

Most libraries I tried either didn’t scale well or lacked key features. So I decided to build one from scratch.

🔧 Key Features of react-spread-sheet-excel

🧮 Formula Support

Write formulas like =A1 + B2 * C3, and the component evaluates them dynamically.

🎨 Rich Formatting

Each cell supports:

Bold, italic, underline
Font size and color
Background color

📤 Export & Import

Export to .csv or .xlsx, and import files back into the component.

🧭 Keyboard Navigation

Arrow keys, tab navigation, undo/redo, and cell merging — just like Excel.

📌 Sticky Headers

Column and row headers stay visible while scrolling.

⚡ Performance

Handles 100,000+ cells with minimal lag thanks to optimized rendering.

📊 Performance Benchmarks

Cells RenderedTime Taken

10,000~0.5s

100,000~2.5s

🧪 Testing & Reliability

The package has 100% unit test coverage , ensuring stability and confidence in production environments.

🛠️ Challenges Faced

1. Formula Parsing

Building a formula engine that supports cell references and nested operations was tricky. I wrote a custom parser and evaluator to handle edge cases.

2. Performance Bottlenecks

React’s reconciliation can be expensive with thousands of inputs. I used memoization, batching updates, and optimized rendering paths.

3. Export/Import Compatibility

Ensuring compatibility with Excel and Google Sheets required careful handling of formats and encodings.

🌱 What’s Next?

Planned features:

Virtual scrolling
Collaborative editing
Integration with Formik/React Hook Form
Custom cell types (dropdowns, checkboxes, etc.)

📣 Try It Out!

📦 npm package
💻 Live demo
🧑‍💻 GitHub repo

🙌 Final Thoughts

If you’re building a dashboard, data entry tool, or anything that resembles Excel in React — give react-spread-sheet-excel a try. It’s lightweight, fast, and packed with features.

I’d love feedback, contributions, and ideas. Let’s build something awesome together!

Why setInterval/setTimeout gets an old state or reference in react components.

sojin antony — Thu, 01 May 2025 09:03:38 +0000

Why setInterval/setTimeout gets an old state or reference in react components. Avoid reading states inside closure.

Updating state directly within a setInterval callback in React components can lead to unexpected behavior and potential issues. The primary reason to avoid this practice is due to closures and how they interact with state updates in React.

When setInterval is used, it creates a closure over the current state values at the time the interval is set. Even if the state is updated later, the callback function within setInterval will still reference the original state values captured in the closure. This can result in the component not re-rendering with the latest state, leading to stale or incorrect UI updates.

To avoid these problems, it’s recommended to use the functional form of setState when updating state within a setInterval callback. This approach ensures that you're working with the most recent state value, as it receives the previous state as an argument.

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

function Counter() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>Count: {count}</div>;
}

But, What if my counter is conditional, I need to start counter on a button click. and stop at value "10"

Oh no!, it in not stopping at 10!, count value inside setInterval is always "0". As i mentioned earlier it is due to the initial values used in closure.

How do we fix this?

Use setTimeout instead of setInterval.
Read state outside closure.

use setTimeout in combination with React's re-rendering to mimic the behavior of setInterval. This approach is often preferred because it gives you more control over the timing and avoids some of the pitfalls of setInterval, such as overlapping executions if the callback takes too long and reading old render values.
here is an example.

✅ Recommended: setTimeout (recursive approach)
Why it's better:
More control: You can easily adjust the timing between executions dynamically.
Avoids overlapping: Unlike setInterval, which runs on a fixed schedule regardless of how long the callback takes, setTimeout ensures the next call only happens after the previous one completes.
Cleaner logic in React: It fits naturally with React's re-render cycle and useEffect dependencies.
React-friendly for most use cases

Best for:
Controlled, step-by-step updates (like counting to a specific number).
Situations where you might want to pause, resume, or adjust timing dynamically.

Do not read a state or call methods inside closure functions.

No more Redux (or Context) to manage complex data in your react applications, try…

sojin antony — Sat, 22 Feb 2025 18:10:13 +0000

No more Redux (or Context) to manage complex data in your react applications, try “useSyncExternalStore” instead

Simplifying State Management in React with useSyncExternalStore

As we all know, managing complex data in React applications can be a challenge. Context just resolving props drilling it will still re render all its children when a minor change happened in state.

Redux is the popular solution, but it can be overkill for simple use cases. And huge bundle size!. With React 18, we have a new hook called useSyncExternalStore that can help us create a global state management system without the need for Redux or Context.

Creating a Custom Store and Reducer

Let’s create a simple store and reducer to manage an array of editable items. We’ll define a Store interface with getState, dispatch, and subscribe methods. We’ll also create a ListReducer interface to represent the state of our array.

// store.ts
import { useCallback } from "react";
import { useSyncExternalStore } from "react";
import { DispatcherActions, initialState, ListReducer, StoreAction } from "./reducer";

export interface Store {
  getState: () => ListReducer;
  dispatch: (fn: DispatcherActions[string], action?: StoreAction) => void;
  subscribe: (onStoreChange: () => void) => () => void;
}

const createStore = (): Store => {
  let state = initialState;
  const getState = (): ListReducer => state;
  const listeners: Set<() => void> = new Set();
  const dispatch = (fn: DispatcherActions[string], action?: StoreAction) => {
    state = fn(state, action || { payload: undefined });
    listeners.forEach((l) => l());
  };
  const subscribe = (listener: () => void) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };
  return { getState, dispatch, subscribe };
};

//State created here.
export const store: Store = createStore();

Implementing useAppSelector

Next, we’ll create a custom useAppSelector hook that uses useSyncExternalStore to select a specific part of the state.

// store.ts
export const useAppSelector = (store: Store, selector: (state: ListReducer) => string) =>
  useSyncExternalStore(
    store.subscribe,
    useCallback(() => selector(store.getState()), [store, selector]),
  );

// reducer.ts

export interface ListReducer {
  data: string[];
}
export const initialState: ListReducer = {
  data: []
};

export interface StoreAction {
  payload: any;
  type?: string;
}

export interface DispatcherActions {
  [key: string]: (state: ListReducer, action: StoreAction) => ListReducer;
}

const actions: DispatcherActions = {
  changeData(state, action) {
    state.data[action.payload.i] = action.payload.value;
    return state;
  },
};

export const {
  changeData,
} = actions;

Now create react components

import Cell from "./cell";
import { store, useAppSelector } from "./store";

function App() {
  const items = useAppSelector(store, (state) => state.data);
  return (
    <>
      {items.map((d: string, i: number) => (
        <Cell i={i} />
      ))}
    </>
  );
}

export default App;

import { changeData } from "./store/reducer";
import { store, useAppSelector } from "./store";

const Cell = ({ i }: { i: number }) => {
  //Read only the expected value
  const val = useAppSelector(store, (state) => state.data[i]);
  const onChange = (e: { target: { value: any } }) => {
    store.dispatch(changeData, { payload: { val: e.target.value, i: i } });
  };
  console.log("Print This one each render Cell index:", i);
  return <input value={val} onChange={onChange} />;
};
export default Cell;

Try this and type something in your text box and check console 😃. only one cell should be getting re rendered.

https://medium.com/media/1e7a4e7820c778caa2d3be31d72cc1c4/href

Rendering a Large Number of Input Boxes

This solution can even handle rendering a large number of input boxes without performance issues.

React Excel sheet

Yup it is working with zero issues. I have used same solution in my excel package,

react-spread-sheet-excel

More information of package can be found here

What If you need to render a lot of input boxes in screen?.

Hope this is help full.

Thanks

Sojin Antony

What If you need to render a lot of input boxes in screen?.

sojin antony — Sun, 11 Aug 2024 09:00:57 +0000

What If you need to render a lot of input boxes in screen?. Efficiently Render Hundreds of Thousands of Input Boxes in React.

Here is a way to load hundreds of for elements in a single screen using react and lazy loading, redux etc.

Rendering a massive number of input boxes (100,000+) on a single screen can be challenging in React. It’s crucial to optimize performance to avoid sluggish user experiences. Here, we’ll explore techniques for tackling this task effectively.

lets assume, the data input is an array of array (matrix). createData function is used to create some random data. like below

[
 [1,2,3,4,5, ...],
 [2,3.4,5,6, ...],
 [3,5,6,7,4, ...]
....
]

import React from "react";
import { useState } from "react";
import "./worst.css"

const createData = (count) => {
  const val: any[][] = [];
  for (let i = 0; i < (count || 1000) ; i++) {
    val.push(
      Array.from({ length: count || 40 }, () => ({
        value: Math.floor(Math.random() * 10),
      }))
    );
  }
  return val;
};

const App = (props) => {
    const [data, setData] = useState(createData(400))
    const update = (e, i, j) => {
        const temp = [...data]
        temp[i][j] = {value: e.target.value}
        setData(temp)
    }
    return (
      <div>
        <table>
          <tbody>{data.map((d, i) => {
            return <tr>{d.map((p, j) => {
                return <td><input value={p.value} onChange={(e)=>update(e, i, j)}/></td>;
            })}</tr>
          })}</tbody>
        </table>
      </div>
    );
}
export default App;

Hmmm! It is able to load the screen but when you type something it is too slow!,

Why it is slow?

Because, on each input box change it is re-rendering the component, looping through all the array of array’s and re building the entire table again!.

The current approach suffers from excessive re-rendering. Every input change triggers a re-render of the entire App component, including all input elements. This is inefficient and leads to performance issues with large tables.

Lets try splitting it into smaller components — https://github.com/sojinantony01/react-spread-sheet/blob/solutions/src/child-componets/index.tsx like this, But, this is also getting re-rendered on each character type.

Okay, lets try adding context — https://github.com/sojinantony01/react-spread-sheet/blob/solutions/src/context/index.tsx, Still re-rendering all the table, child components and the input.

Lazy Loading — https://github.com/sojinantony01/react-spread-sheet/blob/solutions/src/lazyloading/index.tsx, Hmm this looks good, it is not slow anymore , But it is still looping through all the input boxes and re-rendering input boxes.

Okay lets try our another solution, and is there in way not to render subling input boxes in input change.

React-spread-sheet-excel using redux

Lets use Lazy loading with — react-intersection-observer helps render items in view port.

Redux and redux toolkit — Complete state management, and react redux useSelctor helps to manage re render only if required items are updated in state

const MyComp = () => {
  const myVal = useSelector((state) => {
    state.someReducer.someObject.myValue
  }) 
  return <div>{MyVal}</div>
}
//This COmponent will only re render is myValue inside `someReducer.someObject` is updated
// It will not re render is someReducer or The Object is updated.

Solution

Read row of matrix first and add a for loop till row, like here and here. For columns Lets pass each row index to column and read column length there like — here. Now for each input box read the value using rowIndex and column index like here

The solution is able to load 1lakh+ input boxes easly. And this solution is used in component —react-spread-sheet-excel

Update — Latest solution — No more Redux.

My previous solution was using Redux and its power full useSelector For controlling the unwanted re rendering. But By using redux the package size got increased 3 times!, Which i was not happy at all.

Found another solution — No more Redux (Or context) create Own global state and create own “useSelector” with the help of usesyncexternalstore. Check my new solution here. After removing the package size got reduced to 150KB from 622KB. Check version 2.1.6 and 3.0.0 in npm package.

Component supports large number of input boxes, the sibling components will not re render when you type one input box. Component supports math calculations, formatting styles, Keyboard events etc…

Thank you!

Sojin Antony