Ditch Props Drilling! A Smarter Way to Manage State in React

Noyan Dey — Thu, 06 Mar 2025 12:36:00 +0000

State management in a React application can sometimes be tricky, especially when we need to share state between components that do not have a direct relationship. Typically, developers use props drilling, the Context API, or state management libraries like Redux or Zustand to handle such cases.

But what if we could avoid all of these and still effectively manage state across components?

The Tweak: Leveraging Browser's Built-in Events

Instead of using a dedicated state management solution, we can utilize the browser's built-in event system to handle state updates globally. This approach provides a simple, lightweight alternative to manage state updates across unrelated components.

Step 1: Setting Up an Event Dispatcher

To facilitate communication between components, we can use the eventemitter3 package, a lightweight and efficient event emitter for JavaScript and TypeScript applications.

// utils.ts

import EventEmitter from 'events';

export const eventDispatcher = new EventEmitter();

Step 2: Emitting Events

We can use the eventDispatcher to fire events when state updates occur.

Action.tsx

import { useRef } from 'react';
import { eventDispatcher } from './eventDispatcher';

export const ActionButton = () => {
  const itemsRef = useRef<{ [key: string]: number }>({ item: 0 });

  const handleIncrease = (type: string) => {
    const randomNumber = Math.round(Math.random() * 10 + 1);

    eventDispatcher.emit(type, {
      count: ++itemsRef.current[type],
      value: randomNumber,
    });
  };

  return <button onClick={() => handleIncrease('item')}>Increase</button>;
};

Step 3: Listening for Events

To receive updates in another component, we subscribe to the event using useEffect.

// MyComponent.tsx

import { useEffect, useState } from 'react';
import { eventDispatcher } from './eventDispatcher';

const MyComponent = () => {
  const [data, setData] = useState<{ count: number; value: number } | null>(null);

  useEffect(() => {
    const handler = (payload: { count: number; value: number }) => {
      setData(payload); // Updating state to trigger a re-render
    };

    eventDispatcher.on('item', handler);

    return () => {
      eventDispatcher.off('item', handler);
    };
  }, [eventType]);

  return (
    <div>
      <h3>Event Data:</h3>
      {data ? (
        <p>
          Count: {data.count}, Value: {data.value}
        </p>
      ) : (
        <p>No data yet</p>
      )}
    </div>
  );
};

export default MyComponent;

🚀 If you encounter any issues with the built-in event package, consider installing eventemitter3 for a smoother experience!

💡 You can also review the codebase here: Github Repo

Why Use This Approach?

✅ No props drilling – Avoid passing props through multiple layers of components.
✅ No Context API – No need to wrap components with a Provider.
✅ No state management libraries – Simple and lightweight solution.
✅ Decoupled components – Components do not need to know about each other, making the architecture cleaner.

Final Thoughts

While this method provides an easy way to share state across components, it should be used carefully. It is best suited for lightweight state-sharing needs, such as broadcasting events, handling notifications, or managing global UI states.

For complex applications with frequent state updates and dependencies, dedicated state management solutions like Redux or Zustand might still be preferable.

Give this tweak a try in your next React project and see how it simplifies your state management! 🚀

🚢 Why "It Works on My Machine" Is No Longer an Excuse – The Power of Docker

Noyan Dey — Thu, 27 Feb 2025 16:47:29 +0000

Have you ever built an application that runs perfectly on your machine but completely breaks in staging or production? If so, you're not alone. The infamous "It works on my machine" problem has frustrated developers for years, leading to wasted time, deployment issues, and endless debugging sessions.

This is where Docker comes in. By providing a standardized, containerized environment, Docker ensures that your application runs consistently across different systems—whether on your local machine, a colleague’s laptop, or a cloud server.

In this article, I’ll break down why Docker is essential in modern software development and how it can help you eliminate environment inconsistencies once and for all. Let’s dive in! 🚀

1. Consistency Across Environments
One of Docker’s most powerful features is its ability to ensure that applications run the same way regardless of where they're deployed. Whether on a developer’s local machine, a staging server, or a production environment, Docker containers package everything needed to run the software, ensuring consistency across the board. This eliminates the classic "it works on my machine" problem.

2. Simplified Dependency Management
Managing dependencies can be a nightmare, especially when dealing with multiple projects or different versions of the same library. Docker containers encapsulate an application along with its dependencies, libraries, and configurations, making it much easier to manage and distribute software.

3. Efficient Resource Utilization
Containers are lightweight compared to traditional virtual machines (VMs). They share the host system’s kernel, which reduces overhead and allows for more efficient use of system resources. This means you can run many more containers on the same hardware compared to VMs, leading to better resource utilization and cost savings.

4. Enhanced Collaboration and Onboarding
Docker facilitates collaboration among development teams by providing a consistent environment. Developers can share their Docker images through repositories, ensuring that everyone is working with the same setup. This also streamlines the onboarding process for new team members, as they can quickly get up and running with the same development environment.

5. Ease of Scaling and Orchestration
Docker plays a crucial role in scaling applications. With container orchestration tools like Kubernetes, you can easily manage and scale your Docker containers across multiple hosts. This allows for better load balancing, automatic scaling, and self-healing capabilities, making your applications more resilient and scalable.

6. Improved CI/CD Pipelines
Continuous Integration and Continuous Deployment (CI/CD) pipelines benefit greatly from Docker. By using Docker containers, you can ensure that the testing and deployment stages of your pipeline are consistent. Docker’s ability to create isolated environments means that tests can be run in parallel, speeding up the CI/CD process and improving the overall quality of your software.

7. Security and Isolation
Docker provides an additional layer of security by isolating applications in containers. Each container runs in its own isolated environment, which reduces the attack surface and minimizes the risk of vulnerabilities affecting other parts of the system. Docker also integrates with various security tools and best practices to help secure your containers.

Conclusion
In summary, Docker has revolutionized the way we develop, deploy, and manage applications. Its ability to provide consistency, efficient resource utilization, simplified dependency management, and enhanced collaboration makes it a crucial tool for modern software development. If you haven’t yet embraced Docker, now is the perfect time to explore its benefits and see how it can transform your development workflow.

Forem: Noyan Dey