Forem: Golsa

A Frontend Developer’s Guide to the Essentials

Golsa — Mon, 20 Jan 2025 10:48:18 +0000

Being a front-end developer is like being the face of a brand—you’re the one building the first impression for users. But making a great user experience isn’t just about pretty designs and smooth interactions. It’s about understanding the mechanics behind the scenes too. Here, I’ll share my experience with 15 key concepts every frontend dev should know. Think of it as a crash course in the stuff that makes the web tick.

1. DNS (Domain Name System)

Ever wonder how you type in example.com and land on a website? DNS is like the internet’s phonebook, translating human-friendly domain names into IP addresses (e.g., 192.168.1.1). As a frontend dev, understanding DNS can help you troubleshoot when your site’s not reachable.

2. IP (Internet Protocol)

IP addresses are identifiers for devices on a network. Think of them as postal addresses for the internet. Knowing the difference between IPv4 (e.g., 192.168.0.1) and IPv6 (e.g., 2001:0db8::1) can be handy when dealing with APIs or server configurations.

3. NAT (Network Address Translation)

NAT allows multiple devices on a private network to share a single public IP address. If you’re testing your site locally or on a LAN, NAT often plays a role in how your machine communicates with the outside world.

4. HTTP vs HTTPS

HTTP (HyperText Transfer Protocol) is the foundation of web communication. HTTPS is its secure version, encrypting data between client and server using SSL/TLS. Always ensure your site is HTTPS-ready to protect users’ data and improve SEO rankings.

5. SSL/TLS

SSL (Secure Sockets Layer) and its successor, TLS (Transport Layer Security), are protocols that encrypt data for secure communication. If you’ve ever set up a custom domain on a frontend project, you’ve probably dealt with SSL certificates.

6. CDN (Content Delivery Network)

A CDN is a network of servers distributed globally to deliver content faster. By caching assets like images and scripts closer to users, CDNs improve loading times and reduce server load. Tools like Cloudflare and Akamai are popular CDNs.

7. Caching

Browsers and CDNs use caching to store resources temporarily. Understanding cache headers like Cache-Control and Expires can save you from that classic "Why isn’t my CSS updating?" dilemma.

8. Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

SSR generates HTML on the server and sends it to the client, while CSR relies on JavaScript to render content in the browser. SSR is great for SEO and performance, whereas CSR shines in dynamic, app-like experiences. Frameworks like Next.js combine both worlds.

9. REST vs GraphQL

REST APIs expose data as resources, while GraphQL lets you query exactly what you need. Understanding how to work with both is a must for modern front-end development.

10. JSON (JavaScript Object Notation)

JSON is the lingua franca of web data exchange. Whether you’re working with REST APIs or GraphQL, knowing how to parse, validate, and manipulate JSON is essential.

11. Webpack, Vite, and Bundlers

Bundlers like Webpack or Vite package your JavaScript, CSS, and other assets for the browser. They also handle optimizations like tree-shaking and code-splitting, making your app faster.

12. Package Managers

Tools like npm and Yarn manage dependencies for your project. They make it easy to add, remove, and update libraries—but beware of dependency bloat!

13. Version Control (Git)

Git isn’t just for backend developers. As a frontend dev, you’ll use it to track changes, collaborate with teams, and revert mistakes. Platforms like GitHub or GitLab make version control a breeze.

14. Cross-Browser Compatibility

No matter how beautiful your site looks in Chrome, users on Safari or Edge deserve the same experience. Tools like BrowserStack and testing on actual devices are lifesavers here.

15. CLS (Cumulative Layout Shift)

CLS measures how much your page layout shifts as it loads. A high CLS can frustrate users. Use tools like Lighthouse to diagnose and fix layout instability.

Final Thoughts

Being a great front-end developer isn’t just about mastering React or CSS animations. It’s about understanding the underlying technologies that make the web work. These 15 topics have been game-changers in my journey, and I’m sure they’ll be just as valuable for you.

So, what’s your next step? Dive deeper into these topics, experiment, and don’t be afraid to get your hands dirty. That’s where the real learning happens.

The evolutionary progression of IIFE

Golsa — Sun, 12 Jan 2025 12:15:29 +0000

In the evolution of JavaScript, one pattern that stood out in the earlier stages of development was the Immediately Invoked Function Expression (IIFE). This pattern played a significant role in managing scope, avoiding global namespace pollution, and executing code immediately upon definition. However, as JavaScript has matured and introduced new features, the use of IIFE has diminished. This article will explore what IIFE is, how it was used, and the reasons behind its decline in modern JavaScript development.

What is IIFE?

An Immediately Invoked Function Expression (IIFE) is a JavaScript function defined and executed immediately after its creation. Unlike regular functions that require an explicit invocation, an IIFE runs as soon as it is defined, without the need to call it elsewhere in the code. The general syntax of an IIFE is as follows:

(function() {
    console.log("This function runs immediately!");
})();

Alternatively, an arrow function version of IIFE can also be used:

(() => {
    console.log("This is an arrow function IIFE!");
})();

The key elements of this syntax are the function expression wrapped in parentheses () and its immediate invocation using the second pair of parentheses ().

Primary Uses of IIFE

IIFE became popular for several key reasons, particularly in situations where JavaScript developers needed to solve problems related to scope management and global namespace pollution. Below are some of the main purposes for which IIFE was commonly employed:

Creating Local Scope:

In the pre-ES6 days, JavaScript relied heavily on the var keyword, which does not offer block-level scoping. As a result, variables declared with var could either be globally scoped or function-scoped, often leading to potential conflicts and errors. IIFE provided a simple and effective way to create a local scope within which variables could be contained, thus reducing the risk of conflicts in the global namespace.

var globalVar = "I am global";

(function() {
    var localVar = "I am local";
    console.log(localVar);  // Output: I am local
})();
console.log(globalVar);  // Output: I am global
console.log(localVar);  // Error: localVar is not defined

This ability to isolate variables inside a function scope was crucial in large applications or when working with third-party libraries, helping to avoid accidental variable overwrites.

Preventing Global Namespace Pollution:
One of the most significant benefits of IIFE was its ability to prevent global namespace pollution. By wrapping code inside an IIFE, developers could create private variables and functions that would not leak into the global scope. This was particularly useful in complex applications where maintaining a clean global space was essential.
For instance, instead of declaring global variables that could potentially clash with other parts of the application or third-party libraries, developers could encapsulate logic inside an IIFE, ensuring that those variables remain private.
Immediate Execution of Code:
Another common use case for IIFE was the need to execute code immediately upon loading a script. Rather than declaring a function and then calling it separately, IIFE allowed for the function to be invoked automatically as soon as it was defined. This proved particularly useful for initialization tasks or code that needed to run once at the beginning of a script.

(function() {
    console.log("This runs as soon as the script is loaded!");
})();

This immediate execution pattern helped streamline certain operations, especially in scenarios like configuration setups or loading external resources.

Module Pattern: IIFE also played a central role in the development of the Module Pattern, which enabled developers to create modular code by encapsulating certain parts of the codebase while exposing a public API. This pattern allowed for the organization of code into self-contained units, each having its own scope. Through IIFE, developers could simulate private and public members in a way that laid the groundwork for more sophisticated module systems in later versions of JavaScript.

const counter = (function() {
    let count = 0;
    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
})();
counter.increment();  // Output: 1
counter.increment();  // Output: 2
counter.decrement();  // Output: 1

The Module Pattern enabled developers to maintain a clean, organized codebase by controlling access to variables and functions.

Why Is IIFE Less Common Today?

Despite its advantages, the use of IIFE has declined in recent years due to several advancements in JavaScript. The introduction of newer features has largely replaced the need for IIFE, rendering it less relevant in modern JavaScript development. Below are some of the key reasons for this shift:

Block-Level Scoping with let and const: The introduction of let and const in ES6 provided block-level scoping for variables, effectively eliminating the need for IIFE to create local scopes. Variables declared with let and const are scoped to the block in which they are declared, which makes the use of IIFE for scope management redundant.

let localVar = "I am local";  // Scoped to the block or function

This feature made it easier to manage variable scoping without relying on IIFE, simplifying the development process.

ES6 Modules: With the advent of ES6 modules, JavaScript developers gained a native and standardized approach to modularizing code. The import and export syntax allowed for better code organization, management of dependencies, and scope isolation. As a result, the use of IIFE as a module pattern became unnecessary, as modules now provided a more structured, efficient, and readable way to organize code.

// In module.js
export const greet = () => console.log("Hello, world!");

// In app.js
import { greet } from './module.js';
greet();  // Output: Hello, world!

ES6 modules have become the preferred method for code organization and scope management, making IIFE largely obsolete in this regard.

Improved Readability and Maintainability:
As JavaScript has evolved, there has been a strong emphasis on readability and maintainability. IIFE, while functional, can lead to code that is harder to follow, especially when nested within other functions. As developers have adopted more modern patterns, such as modules and block-level scoping, code has become more modular, easier to read, and simpler to maintain.
Modern Build Tools and Minifiers:
Modern JavaScript bundlers and minifiers, such as Webpack and Terser, handle many of the concerns that IIFE was originally designed to address. These tools manage scope isolation, variable renaming, and the prevention of global namespace pollution during the build process, reducing the need for IIFE in production code.

When Should IIFE Still Be Used?

Although the use of IIFE has decreased in modern JavaScript, there are still situations in which it may be useful:

Legacy Code: If you are working with legacy code that relies on IIFE, it might be more practical to continue using it for consistency and compatibility.
Quick Encapsulation: For small, isolated pieces of code that do not need to be reused, IIFE remains a simple and effective solution.
Immediate Initialization: For code that needs to run immediately upon script loading, such as configuration setup or loading resources, IIFE can still be useful.

Conclusion

The Immediately Invoked Function Expression (IIFE) was once a fundamental tool in JavaScript for managing scope, organizing code, and avoiding global namespace pollution. However, with the introduction of block-level scoping, ES6 modules, and advanced build tools, IIFE has become less relevant in modern JavaScript development.

That said, understanding IIFE’s role in the history of JavaScript is still valuable, particularly when working with legacy code or in situations requiring immediate execution. Today, however, ES6 modules and block-level scoping have largely taken over the responsibilities that IIFE once fulfilled, making them the preferred patterns for modern JavaScript development.

Navigating Backend Responsibilities as a Frontend Developer

Golsa — Sat, 11 Jan 2025 08:30:41 +0000

As a front-end developer, my primary focus is building user interfaces and ensuring a seamless user experience. However, there are times when a backend developer is unavailable, and I need to take on some backend responsibilities to ensure project completion. In these situations, understanding the tools and asking the right questions are essential to selecting the best solutions. Here’s how I approach this challenge.

Assessing Project Requirements

The first step is to evaluate the project requirements. Key questions I ask include:

What is the scale of the project?
Is it a simple application or a more complex one with heavy data management needs?
What type of data will be handled?
Is it sensitive (e.g., user credentials) or relatively straightforward (e.g., public posts)?
What are the expected traffic levels?
Will it handle a few users or scale to thousands quickly?
What is the timeline for delivery?
Do I have time to set up a custom backend or need a pre-built solution?
These questions guide me in choosing appropriate backend tools or services.

Tools and Services I Use

When a backend developer isn’t available, I leverage tools that simplify backend development while allowing me to focus on frontend implementation. Here are some of my go-to options:

1. Supabase
Supabase is my top choice for projects requiring a quick, scalable backend. It provides:

A fully functional PostgreSQL database.
Authentication out-of-the-box.
Real-time data synchronization.
RESTful API generation for database operations. I use Supabase when I need rapid deployment and a robust, developer-friendly solution.

2. Firebase
Firebase excels in projects that need real-time features like messaging or live updates. It offers:

NoSQL database (Firestore).
Authentication services.
Cloud functions for serverless operations.
Firebase is ideal for lightweight or mobile-first applications.

3. PocketBase
PocketBase is an open-source backend solution that combines database management, authentication, and file storage. It’s lightweight and runs locally, making it perfect for small-scale projects or prototypes.

4. Strapi
Strapi is a headless CMS that I use when content management is a significant part of the project. It allows me to create a custom API and manage content efficiently.

5. Node.js with Express
If I need a fully customizable backend, I use Node.js with Express. Although this requires more effort, it gives me complete control over the backend logic.

Decision-Making Process

To select the best tool for each project, I consider the following:

Ease of Integration
Does the backend service integrate seamlessly with my frontend stack (e.g., React, Vue, or Angular)?
Documentation and Community Support
Are the tool’s documentation and community resources comprehensive and helpful?
Scalability
Can the solution grow with the project if needed?
Cost
For small projects, free tiers (e.g., Supabase, Firebase) are ideal, but I also assess long-term costs for production.

Questions for Choosing Tools

To ensure the tool fits the project’s needs, I ask:

Does the tool support the database schema I need (relational or NoSQL)?
Does it provide built-in authentication, or will I need to implement custom logic?
What are the deployment requirements? Can I use the tool locally during development?
Is there support for serverless functions if I need custom API logic?
Can it integrate with third-party services or external APIs?

Bridging the Gap

When I use these tools, I document my decisions, configurations, and API usage clearly. This ensures that if a backend developer joins the project later, they can seamlessly take over or enhance the existing setup. Additionally, I maintain communication with stakeholders to ensure the chosen solutions align with project goals.

Conclusion

As a frontend developer, stepping into backend responsibilities requires adaptability and resourcefulness. By leveraging tools like Supabase, Firebase, and Strapi, and asking the right questions, I can efficiently handle backend tasks and deliver high-quality projects. This approach not only ensures timely delivery but also enhances my skill set as a developer.

useEffect sunshine or NIGHTMARE?

Golsa — Tue, 07 Jan 2025 10:17:02 +0000

When I first started working with React, useEffect felt like pure magic. It could do so much, from fetching data to handling side effects. But let me tell you-it's not all sunshine and rainbows. Misusing useEffect can quickly turn your app into a chaotic mess. Over the years, I've learned some hard lessons and figured out how to escape the "useEffect nightmare." Let me share my experiences and some practical examples to help you make the most of this powerful hook while staying out of trouble.

1. Fetching Data from APIs
One of the first things I used useEffect for was fetching data. It's simple on the surface, but I learned the hard way that forgetting dependencies or improper cleanup can create nasty bugs.

import { useEffect, useState } from 'react';
function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []); // Empty dependency array ensures this runs only once.

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Lesson learned: Always double-check your dependency array and handle errors properly.

2. Subscribing to and Cleaning Up Events
I remember adding a resize event listener without cleanup, and it caused so many memory leaks. Cleaning up with useEffect is crucial.

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize); // Cleanup
    };
  }, []);

  return <p>Window width: {width}px</p>;
}

Lesson learned: Cleanup is non-negotiable.

3. Updating the Document Title
I used to forget how often small things like updating the document title could make a huge difference for user experience.

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Runs every time 'count' changes.

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}

Lesson learned: Don't underestimate these small touches - they add polish to your app.

4. Synchronizing with Local Storage
I used to think keeping state and local storage in sync was tricky, but useEffect makes it straightforward-as long as you don't overdo it.

function ThemeToggler() {
  const [theme, setTheme] = useState(
    () => localStorage.getItem('theme') || 'light'
  );

  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
}

Lesson learned: Sync only when necessary; too many useEffect calls can backfire.

5. Animating Components
Animations often felt intimidating until I started using useEffect to control them. A simple fade-in became a game changer for me.

import { useEffect } from 'react';
function FadeIn({ children }) {
  useEffect(() => {
    const element = document.querySelector('#fade');
    element.style.opacity = 1;
  }, []);

  return (
    <div id="fade" style={{ opacity: 0, transition: 'opacity 1s' }}>
      {children}
    </div>
  );
}

Lesson learned: Don't let animations scare you. Break them into manageable pieces.

6. Polling or Interval-Based Actions
There was a time I needed real-time updates and didn't know how to manage intervals effectively. useEffect saved the day.

function TimeUpdater() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval); // Cleanup interval on unmount
  }, []);

  return <p>{time.toLocaleTimeString()}</p>;
}

Lesson learned: Cleanup is just as important with intervals as it is with event listeners.

7. Listening to Redux or Global State Changes
I've had moments where syncing components with global state felt like juggling too many balls. useEffect helped me keep it under control.

import { useSelector } from 'react-redux';
function UserGreeting() {
  const user = useSelector(state => state.user);

  useEffect(() => {
    console.log(`User logged in: ${user.name}`);
  }, [user]);

  return <h1>Hello, {user.name}!</h1>;
}

Lesson learned: Always make sure your dependencies are accurate to avoid unnecessary re-renders.

8. Handling Component Visibility
Managing dropdowns and modals used to feel like a nightmare. Using useEffect to detect outside clicks made life so much easier.

function Dropdown({ isOpen, onClose }) {
  useEffect(() => {
    if (!isOpen) return;

    const handleClickOutside = (event) => {
      if (!document.getElementById('dropdown').contains(event.target)) {
        onClose();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [isOpen]);

  return isOpen ? <div id="dropdown">Dropdown Content</div> : null;
}

Lesson learned: Simplify your logic by isolating behavior in useEffect.

9. Integrating with Third-Party Libraries
Third-party libraries like Chart.js felt overwhelming at first. Now, useEffect is my go-to for setup and teardown.

import Chart from 'chart.js/auto';

function LineChart({ data }) {
  useEffect(() => {
    const ctx = document.getElementById('chart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data,
    });

    return () => chart.destroy(); // Cleanup on unmount
  }, [data]);

  return <canvas id="chart"></canvas>;
}

Lesson learned: Cleanup is just as important as initialization.

10. Debugging with Logs
I used to add random console.log statements everywhere until I realized I could use useEffect to debug state and prop changes cleanly.

function DebugComponent({ value }) {
  useEffect(() => {
    console.log('Value changed:', value);
  }, [value]);

  return <p>Check the console!</p>;
}

Lesson learned: Use useEffect to track changes systematically.

Wrapping Up
useEffect can be a lifesaver or a headache, depending on how you use it. Over the years, I've learned to respect its power while being cautious of its pitfalls. Always keep cleanup in mind, avoid unnecessary re-renders, and double-check your dependency arrays.
What about you? Have you faced the "useEffect nightmare" yet? Let's talk in the comments!

Mastering the Most Useful Next.js and React Features for 2025

Golsa — Wed, 01 Jan 2025 07:14:39 +0000

Every new year in tech feels like a blank slate—a chance to grow, learn, and embrace the next big thing. For me, 2025 isn’t just about keeping up; it’s about deepening my understanding of the tools I already love, like Next.js and React, and discovering what’s possible with the new features that have come our way. Here are the key features I’m committing to mastering this year, based on my personal experiences and lessons learned.

1. Server Actions and Edge Functions

When I first explored Server Actions and Edge Functions, I was blown away by their potential to simplify complex architectures. But diving deeper, I realized how much more there is to learn. This year, I’m planning to:

Refactor one of my side projects to fully utilize Edge Functions and watch the performance improvements unfold.
Push myself to build apps that rely on real-time data processing at the edge—something I’ve always found a bit intimidating.
Write about my successes and failures so others can learn from my journey.

2. App Router for Scalable Routing

The App Router has made me rethink how I structure applications. But let’s be real it wasn’t love at first sight. It took time to understand its full potential. Now, I’m:

Revisiting older projects to refactor them with the App Router, learning to balance flexibility and simplicity.
Experimenting with how it handles nested layouts in large-scale projects—something I used to struggle with.

3. React Server Components

React Server Components have always intrigued me. My first attempt at using them was clunky, but I could see the promise. This year, I’m determined to:

Build a real-world project entirely optimized with Server Components.
Share my approach to common pitfalls, especially for developers transitioning from traditional React paradigms.

4. AI Integration with Next.js

Integrating AI has been one of the most fun and challenging aspects of my recent projects. The possibilities are endless, but they can feel overwhelming. This year, I’ll:

Build an app that combines AI with edge computing to create highly personalized user experiences.
Spend more time testing AI models with Next.js middleware to optimize their real-world usability.

5. Accessibility First Design

Accessibility wasn’t always at the forefront of my mind, but as I’ve grown, I’ve realized how critical it is to build apps that everyone can use. This year, I’ll:

Dive deep into ARIA roles and semantic HTML to make applications more accessible.
Use tools like Lighthouse and Axe to catch accessibility issues early.
Share tips on making accessibility a core part of the development workflow.

6. Next.js Middleware in Depth

Middleware has always been a fascinating concept for me, but I often shied away from it, thinking it was too advanced. Recently, I’ve realized its potential to shape applications in powerful ways. This year, I’ll:

Explore middleware for handling custom headers, authentication, and data validation.
Work on reusable middleware patterns that can be shared across multiple projects.
Write about my learnings to demystify middleware for others.

7. State Management Evolution

State management has always been tricky for me. I’ve spent countless hours debating Redux, Context API, and the new state management tools. This year, I’m:

Diving into Zustand and Recoil to understand their unique strengths.
Experimenting with server-side state solutions like React Query to handle edge cases in real-time apps.

8. Middleware for Enhanced Control

I used to think middleware was only for advanced use cases. But after implementing it in a recent project, I realized its true potential. My goal is to:

Build reusable middleware templates for common patterns like authentication and logging.
Share my learnings with other developers who might feel daunted by middleware.

9. Performance Optimization Techniques

Performance is everything. I’ve spent nights chasing milliseconds in load time, and this year, I’m:

Going deeper into tree-shaking and dynamic imports to trim unnecessary code.
Using React Suspense to make complex loading states seamless.

Green Computing in Web Development

I care about the environment, and I’m realizing how much my coding decisions impact it. In 2025, I’m committing to:

Hosting apps on platforms that prioritize renewable energy.
Minimizing server usage by leaning into static site generation and smarter caching strategies.

Final Thoughts

This isn’t just a list of features for me! it’s a personal roadmap. Every goal here is tied to something I’ve struggled with, been excited about, or felt inspired by. What about you? What Next.js and React features are you eager to master this year? Let’s make 2025 the year we all push our boundaries and grow together.

5 Situations Where You Need useState in Your Projects

Golsa — Sat, 28 Dec 2024 08:09:57 +0000

React's useState is one of the most essential hooks for managing state in functional components. If you’ve ever wondered when to use useState in your projects, this article highlights five practical situations where useState becomes necessary. Let's dive in!

1. Toggling UI Elements (e.g., Modals or Dropdowns)

Whenever you need to show or hide an element like a modal, dropdown, or tooltip, useState can help manage the visibility state.

import { useState } from 'react';

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Modal</button>
      {isOpen && <div className="modal">This is a modal</div>}
    </div>
  );
}

Here, useState tracks whether the modal is open (true) or closed (false).

2. Handling User Input in Forms
Managing form inputs, like text fields, checkboxes, or radio buttons, often requires maintaining the current value. useState is perfect for this.

function LoginForm() {
  const [username, setUsername] = useState('');

  return (
    <form>
      <label>
        Username:
        <input 
          type="text" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)} 
        />
      </label>
      <p>Your username: {username}</p>
    </form>
  );
}

Each keystroke updates the state, making the form interactive and responsive.

3. Tracking Component State (e.g., Counters)
useState is often used for tracking simple numeric states, like counters, scores, or progress indicators.

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

This example shows a simple counter where useState stores the current count.

4. Managing Themes or Modes
For toggling themes (e.g., light mode and dark mode), useState can handle the current mode and trigger UI changes accordingly.

function ThemeSwitcher() {
  const [theme, setTheme] = useState('light');

  return (
    <div className={`theme-${theme}`}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
    </div>
  );
}

With useState, you can easily track the active theme and update the styles dynamically.

5. Fetching Data and Storing Local Results
When fetching data from an API, you can store the results in a state variable for local use in your component.

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Here, useState holds the fetched user data, making it available for rendering.

Final Thoughts
useState is a fundamental hook in React that enables you to manage dynamic, interactive, and responsive states in functional components. By understanding these five common use cases, you can confidently integrate useState into your projects and handle state effectively.

What are your favorite use cases for useState? Share them in the comments below!