DEV Community: Akshay S

Why Writing Your Thoughts Down Doesn’t Stop Overthinking (And What Actually Does)

Akshay S — Wed, 14 Jan 2026 04:48:15 +0000

Most people try to deal with overthinking by writing things down.

They open Google Docs.
They use Notion.
They start journaling.

It feels productive. But the thought is still there.

The same worry comes back.
The same fear repeats.
The same story plays every day.

This happens because writing does not process a thought. It only stores it.

Your brain doesn’t care that the words are on a screen.
If the emotional loop is unresolved, it keeps running.

Why Writing Alone Fails

Overthinking is not caused by too many thoughts.

It’s caused by unprocessed uncertainty.

When the brain detects a possible threat — social, emotional, financial, relational — it tries to solve it by replaying it.

This loop continues until one of two things happens:

The brain gets clarity
The brain gets exhausted

Writing without structure gives neither.
You just re-read the same fear in different words.

That’s why journaling often feels good in the moment, then useless 30 minutes later.

How Psychologists Actually Stop Thought Loops

When someone goes to therapy, a psychologist doesn’t say:

“Write it down and move on.”

They walk the person through a structured cognitive process.

This comes from Cognitive Behavioral Therapy (CBT), one of the most scientifically supported methods for treating anxiety, depression, and rumination.

The flow looks like this:

What exactly is the thought?
What am I assuming?
Is this a fact or a fear?
What evidence supports it?
What evidence contradicts it?
What happens if I stop engaging with it?

This order matters.

It forces the brain out of emotional reaction and into analytical reasoning.

And when that happens, something important changes.

The Moment the Brain Lets Go

A looping thought feels dangerous.

But when you slow it down and examine it, the brain often realizes:

“This feels real… but it isn’t actually true.”

That shift is not motivation.
It’s not positive thinking.
It’s threat resolution.

Once the brain decides the threat is false or exaggerated, it stops spending energy on it.

That’s why people feel lighter after a good therapy session.
The thought didn’t disappear — it lost its emotional power.

Why Overthinking Is a System Problem

Overthinking is not a personality flaw.
It’s a processing failure.

Your brain is running the same unfinished task over and over because it doesn’t have a way to close it.

Google Docs and Notion are great for writing.
They are terrible for thinking.

They don’t ask questions.
They don’t challenge assumptions.
They don’t separate fear from fact.

They just record whatever your anxiety says.

Processing vs Dumping

There’s a big difference between:

“I wrote it down.”

and

“I worked through it.”

Writing is a memory system.
Processing is a resolution system.

One stores the problem.
The other ends the loop.

That’s the real difference between journaling and therapy.

One collects thoughts.
The other dismantles them.

A Better Way to Process Thoughts

If you want to actually run your thoughts through this kind of structured psychological flow, tools like NoiseFilter are being built to do exactly that — turning overthinking into a guided, step-by-step clarity process instead of a mental spiral.

You can see how it works here:
https://www.noisefilter.app

Final Thought

If your mind keeps returning to the same worry, it’s not because you didn’t write it.

It’s because the brain still thinks the threat is real.

The moment you guide a thought through evidence, assumptions, and reality checks, it stops being dangerous.

And dangerous thoughts are the only ones that loop.

That’s the science behind mental relief.

How I Fixed a Circular Dependency Bug in Redux Using dpdm

Akshay S — Tue, 08 Oct 2024 16:01:48 +0000

Breaking the Circle of Confusion: A Redux Circular Dependency Journey

Recently, I stumbled across a bug in my Redux codebase that left me scratching my head. If you've ever felt that sudden wave of confusion when the test suite throws an error that makes no sense, you’ll know the feeling. Here's what happened and how I eventually found (and fixed) the issue.

What on Earth is a Circular Dependency?

A circular dependency occurs when two or more modules depend on each other—directly or indirectly—creating an infinite loop in the dependency chain. In other words, it's like two friends saying, "You go first," but no one ever moves. In JavaScript, this can result in undefined modules or incomplete data, which leads to bugs that can be incredibly hard to trace.

The Culprit: An Example

Imagine two JavaScript files, moduleA.js and moduleB.js:

// moduleA.js
import { functionB } from './moduleB.js';
export function functionA() {
  console.log('functionA called');
  functionB();
}

// moduleB.js
import { functionA } from './moduleA.js';
export function functionB() {
  console.log('functionB called');
  functionA();
}

Here, both modules depend on each other. When JavaScript tries to load them, it gets confused because neither can be fully loaded without the other being ready first. This leads to problems like undefined functions or incomplete modules—basically, a mess.

So, How Did I Find My Circular Dependency?

Ah, the dreaded error that kicked off this adventure:

Error: `reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers.
 ❯ Module.configureStore node_modules/@reduxjs/toolkit/src/configureStore.ts:98:11

My first reaction? "Wait, what?!" — not my finest moment. I was sure my reducers were in place, so this error seemed out of nowhere. After some digging, I realized this wasn’t a missing reducer issue but a circular dependency sneaking into my Redux setup. Of course, figuring that out wasn't easy!

The Real Hero: `dpdm`

That's when I found my savior: the npm package dpdm. This gem analyzes your dependency tree and shows you where those sneaky circular dependencies live. Running the following command gave me a clear view:

dpdm --no-warning --no-tree ./src/index.tsx

And voilà! Here’s a taste of what it found in my project:

• Circular Dependencies
  01) src/stores/store.ts -> src/stores/rootReducer.ts -> src/stores/slice/authSlice.ts -> src/utilities/api.ts
  02) src/stores/rootReducer.ts -> src/stores/slice/bookingSlice.ts -> src/hooks/redux.tsx -> src/stores/types.ts -> src/stores/setUpStore.ts
  03) src/stores/types.ts -> src/stores/setUpStore.ts
  ...

The Fix: Refactoring Time!

The report was clear: there were a bunch of circular dependencies in my Redux files, primarily in store.ts, rootReducer.ts, and some slices. After splitting up some of the logic, breaking down unnecessary dependencies, and refactoring the code, I finally got things back in order.

Lessons Learned

Circular dependencies are sneaky: They often don’t show up until runtime or during unit tests, making them hard to track down.
Tools like dpdm are lifesavers: Don’t waste time manually searching through imports. Let tools do the heavy lifting.
Refactoring is your friend: Sometimes circular dependencies are a sign of bad architecture. A good refactor not only fixes the immediate issue but also makes your codebase cleaner and more maintainable.

So, the next time you run into one of these pesky bugs, grab some coffee, have a laugh, and break that circle!

Happy debugging! 😊

Rotating Images with Node.js Made Easy: Automate BoreStuffs

Akshay S — Wed, 27 Mar 2024 04:20:54 +0000

Are you looking to automate the process of rotating images using Node.js? Look no further! In this guide, we'll walk through a simple script that utilizes the Jimp library to effortlessly rotate images.

Getting Started

First things first, let's ensure you have Node.js installed on your machine. If not, head over to Node.js website and follow the installation instructions.

Next, create a new directory for your project and initialize it with npm:

mkdir image-rotation
cd image-rotation
npm init -y

This will create a package.json file where we'll manage our project dependencies.

Installing Dependencies

We'll need two main dependencies for this project: Jimp for image processing and fs for file system operations. Let's install them:

npm install jimp fs

The Code

Now, let's dive into the code. Below is a simplified version of a Node.js script that rotates images within a specified directory by 180 degrees:

// Import required modules
var Jimp = require("jimp");
const fs = require('fs');

// Define the directory path where images are located
const directoryPath = ""; // Specify your directory path here
const rotateDeg = 180; // Define the rotation angle

// Function to get files in the directory
const getTheFilesInTheDir = (dir, callback) => {
    fs.readdir(dir, function (err, files) {
        if (err) {
            console.log('Unable to scan directory: ' + err);
            callback(err, null);
        } else {
            console.log("getTheFilesInTheDir", { files });
            callback(null, files);
        }
    });
}

// Function to rotate an image
const rotateImage = (filePath) => {
    Jimp.read(filePath, (err, image) => {
        if (err) throw err;
        console.log("RotatedImage:", filePath);
        image.rotate(180).write(filePath); // Rotate the image by 180 degrees
    });
}

// Function to initiate the rotation process
const initRotate = async () => {
    getTheFilesInTheDir(directoryPath, async (err, files) => {
        if (err) {
            console.log("Error:", error);
            return;
        }
        console.log("Files:", files);
        for (const file of files) {
            const path = directoryPath + "/" + file;
            const ext = file.split('.');
            if(ext[ext.length - 1] === 'webp'){
                // Skip rotating WebP files, if any specific handling is required, add it here
            } else {
                await rotateImage(path); // Rotate non-WebP images
            }
        }
    });
}

// Call the function to initiate rotation
initRotate();

Explanation

We start by importing necessary modules: Jimp for image manipulation and fs for file system operations.
directoryPath variable holds the path to the directory containing the images to be rotated.
getTheFilesInTheDir function reads the files in the specified directory.
rotateImage function takes a file path, reads the image using Jimp, rotates it by 180 degrees, and saves it.
initRotate function orchestrates the rotation process by getting the files in the directory and iterating through them to rotate each one.
We check the file extension to skip rotating WebP images if present, but you can customize this behavior as needed.

Conclusion

And that's it! You've just created a simple Node.js script to rotate images effortlessly. Feel free to modify the code according to your specific requirements and integrate it into your projects. Happy coding!

Building Web Apps with React, WebAssembly, and Go

Akshay S — Tue, 06 Feb 2024 13:31:09 +0000

Introduction

Hey folks! Welcome to this blog where we'll delve into the fascinating world of WebAssembly with React.js and Go Lang. But before we jump in, let's quickly demystify WebAssembly—what it is, why it's beneficial, where it finds its applications and how its work.

What is WebAssembly (WASM)?

WebAssembly is like the superhero of web development! It's a special kind of code that can run in modern web browsers. Think of it as a low-level, assembly-like language with a compact binary format. What makes it super cool is its ability to run with almost native performance. It's a fantastic compilation target for languages like C/C++, C#, and Rust, enabling them to work seamlessly on the web. Plus, it plays well with JavaScript, allowing them to team up for powerful web applications.

Why is WebAssembly Useful?

Imagine having the speed and efficiency of low-level languages directly in your web browser. WebAssembly makes this possible! It brings high-performance capabilities to web applications, allowing them to handle complex tasks smoothly and swiftly.

Use Cases of WebAssembly:

Performance-Intensive Tasks:
- Ideal for tasks requiring heavy computation, like video editing or 3D graphics rendering.
Parallel Processing:
- Well-suited for parallel processing, enhancing overall application speed.

How Web Assembly Works

When you visit a website, your browser has two cool engines working behind the scenes – the JavaScript (JS) engine and the WebAssembly (Wasm) engine. Let's break down what happens with each.

JavaScript Engine Magic:

Parsing the Code:
- The JS engine starts by looking at the code you wrote on a website.
- It checks the code's grammar and structure to make sure it's correct.
Abstract Syntax Tree (AST):
- If all is good, the engine creates an AST, which is like a tree structure representing your code.
Intermediate Representation (IR):
- The AST becomes bytecode, a kind of middle-ground language that's easier for the computer to understand.
Machine Code Compilation:
- Finally, the engine compiles this bytecode into machine code that your computer's processor can run.

Wasm Engine Magic:

Now, let's see how WebAssembly brings its own magic to the party.

Writing Code with Types:
- With Wasm, you write your code using a statically-typed language, meaning you declare types in advance.
Pre-compiled Wasm Module:
- You generate a pre-compiled Wasm module. Think of it like packaging your code in a neat box.
Skipping Parsing and IR:
- Because Wasm code already has types, it skips the parsing and AST to IR steps that JS goes through.
Direct Compilation:
- The Wasm engine can then directly compile your neatly packaged code into machine code, saving time and making it super fast.

Why Wasm is Speedy:

Type Declaration:
- JS checks variable types while running code (dynamic typing), but Wasm knows types in advance (static typing), making it faster.
Skip the Line:
- Wasm skips some steps because it's pre-compiled and types are declared, giving it a shortcut to performance.

In a nutshell, Wasm takes a faster route to get your code running in the browser, making web applications snappier and more efficient! 🚀

Let's Get Our Hands Dirty

Alright, let's dive into the practical side of things! Make sure you have Node.js (latest version), Go Lang (version 1.21), and a basic understanding of both Go and React.js. If you're all set, here's a quick rundown of what we'll be doing:

Step 1: Set Up React Project with Vite

Install Vite globally (if not already installed):
```
npm install -g create-vite
```

Create a new React project:

create-vite my-react-wasm-app --template react

Navigate to the project:
```
cd my-react-wasm-app
```

go mod init my-react-wasm-app

Step 2: Set Up Go Module

After creating your React project, let's set up the Go module. Navigate to the project root and create a new folder named go.
```
mkdir go
```
Move into the go folder:
```
cd go
```
Initialize a new Go module in this directory:
```
go mod init my-react-wasm-app/go
```

Now, your Go module is all set up within the go folder.

Step 3: Write Go Code

Inside the go folder, create a new Go file, for example, main.go.
Write a simple Go function in main.go. For instance, let's create a function that calculate Fibonacci sum:

package main

import (
    "syscall/js"
)

func main() {
    // Create a channel to keep the Go program alive
    done := make(chan struct{}, 0)

    // Expose the Go function `fibonacciSum` to JavaScript
    js.Global().Set("wasmFibonacciSum", js.FuncOf(fibonacciSum))

    // Block the program from exiting
    <-done
}

// Define the Fibonacci sum function that will be exposed to JavaScript
func fibonacciSum(this js.Value, p []js.Value) interface{} {
    // Retrieve the value of the argument passed from JavaScript
    n := p[0].Int()

    // Initialize variables for the Fibonacci sequence
    a, b, totalSum := 0, 1, 0

    // Calculate the Fibonacci sum up to the specified number
    for i := 0; i < n; i++ {
        totalSum += a
        a, b = b, a+b
    }

    // Return the calculated Fibonacci sum as a JavaScript value
    return js.ValueOf(totalSum)
}

Step 4: Convert Go Code to Wasm

Build the Go code to generate WebAssembly:

This command will create a main.wasm file containing the compiled WebAssembly code.

GOARCH=wasm GOOS=js go build -o main.wasm

Copy the wasm_exec.js file to your project directory:

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

Explanation:
The wasm_exec.js file is a support file provided by the Go standard library. It contains necessary functions to enable communication between Go and JavaScript in a WebAssembly environment. The cp command copies this file from the Go installation directory ($(go env GOROOT)/misc/wasm/) to your current project directory. Including this file in your project is essential for proper interaction between the Go code compiled to WebAssembly and the surrounding JavaScript environment.

Step 5: Use Wasm File in React.js

After generating the required wasm file (main.wasm), move the file to the public folder of your React.js application. This folder is typically located at the root level of your project.
Move the wasm_exec.js file to the src folder of your React.js application. This folder is where your source code resides.

In your React component (App.tsx), import the necessary dependencies:

import { useEffect, useState } from 'react';
import './wasm_exec.js';
import './wasmTypes.d.ts';

Define a WebAssembly function wrapper:

function wasmFibonacciSum(n: number) {
    return new Promise<number>((resolve) => {
        const res = window.wasmFibonacciSum(n);
        resolve(res);
    });
}

Step 5: Finalize App.tsx

Here is the final version of App.tsx:

import { useEffect, useState } from 'react';
import './wasm_exec.js';  // Import the wasm_exec.js file for Go-Wasm compatibility
import './wasmTypes.d.ts';  // Import the TypeScript declarations for WebAssembly

// Function to wrap the wasmFibonacciSum function for asynchronous handling
function wasmFibonacciSum(n: number) {
  return new Promise<number>((resolve) => {
    // Call the wasmFibonacciSum function from Go
    const res = window.wasmFibonacciSum(n);  
    resolve(res);
  });
}

const App = () => {
  const [isWasmLoaded, setIsWasmLoaded] = useState(false);
  const [wasmResult, setWasmResult] = useState<number | null>(null);

  // useEffect hook to load WebAssembly when the component mounts
  useEffect(() => {
    // Function to asynchronously load WebAssembly
    async function loadWasm(): Promise<void> {
      // Create a new Go object
      const goWasm = new window.Go();  
      const result = await WebAssembly.instantiateStreaming(
        // Fetch and instantiate the main.wasm file
        fetch('main.wasm'),  
        // Provide the import object to Go for communication with JavaScript
        goWasm.importObject  
      );
      // Run the Go program with the WebAssembly instance
      goWasm.run(result.instance);  
      setIsWasmLoaded(true); 
    }

    loadWasm(); 
  }, []);  

  // Function to handle button click and initiate WebAssembly calculation
  const handleClickButton = async () => {
    const n = 10;  // Choose a value for n

    console.log('Starting WebAssembly calculation...');
    const wasmStartTime = performance.now();

    try {
      // Call the wasmFibonacciSum function asynchronously
      const result = await wasmFibonacciSum(n);  
      setWasmResult(result); 
      console.log('WebAssembly Result:', result);
    } catch (error) {
      console.error('WebAssembly Error:', error);
    }

    const wasmEndTime = performance.now();
    console.log(`WebAssembly Calculation Time: ${wasmEndTime - wasmStartTime} ms`);
  };

  // JSX markup for the React component
  return (
    <div>
      {isWasmLoaded && <p>Wasm Loaded</p>} 
      {!isWasmLoaded && <p>Wasm not Loaded</p>} 

      <button onClick={handleClickButton}>Handle Click Wasm</button>  
      {wasmResult !== null && (
        <div>
          <p>WebAssembly Result: {wasmResult}</p> 
        </div>
      )}
    </div>
  );
};

export default App;

Explanation:

The final App.tsx integrates WebAssembly seamlessly into a React application.
It loads the WebAssembly module when the component mounts, displays a message indicating if WebAssembly is loaded or not, and triggers a WebAssembly calculation when the button is clicked.
The result of the calculation is displayed below the button.

Feel free to customize the values and calculations according to your specific use case. Your React application is now fully equipped to leverage the power of WebAssembly! 🚀

Please check the complete code repository at: https://github.com/akshays-repo/wasm-react

Some Useful Blogs and Resources

Learn techniques to optimize the size of Go WebAssembly binaries for improved web application performance : https://dev.bitolog.com/minimizing-go-webassembly-binary-size/
Explore how Figma utilized WebAssembly to reduce load times significantly, providing insights into real-world performance improvements: https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/

Building a Confirmation Dialog Component with React and Material-UI

Akshay S — Wed, 31 May 2023 12:19:55 +0000

Introduction:

Confirmation Dialogs are a crucial UI component in many applications. They prompt users to confirm or cancel actions that have significant consequences. In this blog post, we will explore how to create a reusable Confirmation Dialog component using React and Material-UI. We will dive into the code and explain its functionality, as well as demonstrate how to use the component in your React applications.

Code

import { useState } from "react";
import {
  Dialog,
  Button,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
} from "@material-ui/core";

function ConfirmationDialog(props) {
  //local states
  const [open, setOpen] = useState(false);

  const showDialog = () => {
    setOpen(true);
  };

  const hideDialog = () => {
    setOpen(false);
  };

  const confirmRequest = () => {
    props.response();
    hideDialog();
  };

  return (
    <>
      {props.children(showDialog)}
      {open && (
        <Dialog
          open={open}
          onClose={hideDialog}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              {props.description}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={confirmRequest} color="primary">
              Yes
            </Button>
            <Button onClick={hideDialog} color="primary">
              No
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

export default ConfirmationDialog;

Example usage:

import ConfirmationDialog from './ConfirmationDialog';

function MyComponent() {
  const handleConfirmation = () => {
    // Perform action upon confirmation
    console.log('Confirmed!');
  };

  return (
    <ConfirmationDialog
      title="Confirmation"
      description="Are you sure you want to proceed?"
      response={handleConfirmation}
    >
      {(showDialog) => (
        <button onClick={showDialog}>Open Confirmation Dialog</button>
      )}
    </ConfirmationDialog>
  );
}

export default MyComponent;

In the above example, we import the ConfirmationDialog component and use it within the MyComponent component. When the user clicks the "Open Confirmation Dialog" button, the Confirmation Dialog will appear with the provided title and description. Upon confirming, the handleConfirmation function will be executed.

useMemo vs usecallback in simple terms

Akshay S — Mon, 16 Jan 2023 15:51:37 +0000

When building a React application, two hooks that are commonly used for performance optimization are useMemo and useCallback.

useMemo is a hook that allows you to cache the result of a expensive computation and only re-evaluate it when one of the dependencies has changed. This can greatly improve the performance of your application by avoiding unnecessary re-renders.

useCallback is similar to useMemo, but it is used to cache the reference to a function, instead of caching the result of a computation. This is useful when passing a function down as a prop to a child component and you want to avoid re-creating the function on every render.

In short, useMemo is used to cache the result of a computation and useCallback is used to cache the reference to a function. Both can help improve the performance of your React application by avoiding unnecessary re-renders.

import { useMemo, useCallback } from 'react';

function MyComponent({ data }) {
  const memoizedData = useMemo(() => {
    // perform expensive computation on data
    return data.map(item => item * 2);
  }, [data]);

  const handleClick = useCallback(() => {
    console.log(memoizedData);
  }, [memoizedData]);

  return (
    <div>
      <button onClick={handleClick}>Log Data</button>
    </div>
  );
}

In this example, useMemo is used to memoize the result of an expensive computation performed on the data prop. This means that the computation will only be performed again if the data prop changes.

useCallback is then used to create a callback function that will only change if the memoizedData value changes. This is useful when passing the callback as a prop to a child component, as it will help prevent unnecessary re-renders of the child component.

An Better way to call mui alert dialog

Akshay S — Sun, 17 Jul 2022 14:56:09 +0000

Installation

Install mui-react-alert with npm

  npm i mui-react-alert

Demo

https://codesandbox.io/s/funny-mestorf-k2dcph

Usage/Examples

App.tsx

import { AlertDialog } from "mui-react-alert";

function App() {
  return (
    <div className="App">
      <AlertDialog />
    </div>
  );
}

export default App;

Button.tsx

import { showAlertConfirmarion } from "mui-react-alert";

function Button() {
  return (
      <button
      onClick={() => {
          showAlertConfirmarion({
          title: "Use Google's location service?",
          cancelLabel: "DISAGREE",
          confirmLabel: "AGREE",
          subtitle:
            "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.",
          onConfirmation: function (): void {
            alert("Say hello");
          },
        });
      }}
    >
      Show alert dialog
    </button>
  );
}

export default Button;