Understanding useEffect in React: A Beginner's Guide with Examples

If you’re diving into the world of web development, chances are you’ve heard of React.js. It’s one of the most popular JavaScript libraries out there, and for good reason. Whether you’re a beginner or an experienced developer looking to expand your skill set, React.js is a powerful tool that can help you build dynamic, fast, and scalable user interfaces.

In this blog, we’ll break down what React.js is, why it’s so widely used, and how you can get started with it. By the end, you’ll have a solid understanding of React and why it’s a go-to choice for developers worldwide.

What is React.js?

React.js, often simply called React, is an open-source JavaScript library developed by Facebook. It’s used for building user interfaces, particularly for single-page applications (SPAs) where you need a fast and responsive experience. Unlike traditional frameworks that handle everything from data management to routing, React focuses solely on the view layer of your application. This makes it lightweight and flexible, allowing you to pair it with other libraries or frameworks as needed.

React.js was initially released on May 29, 2013, by Facebook (now Meta), and since then, it has gained massive popularity in the developer community. Companies like Facebook, Instagram, Netflix, and Airbnb use React to power their front-end applications, which speaks volumes about its capabilities.

Why Use React.js?

So, what makes React so special? Here are some key reasons why developers love it:

Component-Based Architecture
React is built around the concept of components. A component is a reusable piece of code that represents a part of the user interface (UI). For example, a button, a navbar, or even an entire page can be a component. This modular approach makes your code more organized, maintainable, and easier to debug.
Virtual DOM
One of React’s standout features is the Virtual DOM. Instead of directly manipulating the browser’s DOM (which can be slow), React creates a lightweight copy of it in memory. When changes occur, React updates the Virtual DOM first, then efficiently determines the minimal set of changes needed to update the actual DOM. This results in faster performance and a smoother user experience.
Declarative Syntax
React uses a declarative approach to building UIs. Instead of writing step-by-step instructions for how the UI should update (imperative programming), you simply describe what the UI should look like for a given state. React takes care of the rest. This makes your code more predictable and easier to understand.
Rich Ecosystem
React has a vast ecosystem of tools, libraries, and resources. Whether you need state management (Redux, Zustand), routing (React Router), or styling solutions (Styled Components, Tailwind CSS), there’s likely a library that integrates seamlessly with React.
Strong Community Support
With millions of developers using React, you’ll never be short of tutorials, documentation, or community support. Whether you’re stuck on a problem or looking for best practices, the React community has your back.

Core Concepts of React.js

Before you start building with React, it’s important to understand some of its core concepts:

JSX (JavaScript XML)
JSX is a syntax extension that allows you to write HTML-like code within JavaScript. While it’s not mandatory to use JSX, it makes your code more readable and intuitive. Under the hood, JSX gets transformed into regular JavaScript function calls.

Example:
```
 const element = <h1>Hello, React!</h1>;
```
Components
As mentioned earlier, components are the building blocks of a React application. There are two types of components:
- Functional Components: These are simple JavaScript functions that return JSX.
- Class Components: These are ES6 classes that extend React.Component and have additional features like state and lifecycle methods.

Example of a Functional Component:

    function Greeting() {
      return <h1>Hello, World!</h1>;
    }

Example of a class component in React:

    jsxCopyEditimport React, { Component } from "react";

    class Greeting extends Component {
      render() {
        return <h1>Hello, {this.props.name}!</h1>;
      }
    }

    // Usage
    <Greeting name="Yasin" />;

🔹 Breakdown:

Class Components extend Component from React.
They must include a render() method, which returns JSX.
Props are accessed via this.props.

State and Props
- State: State is a built-in object that stores data specific to a component. When the state changes, the component re-renders to reflect the new data.
- Props: Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning the child component cannot modify them.

Hooks
Introduced in React 16.8, hooks allow you to use state and other React features in functional components. The most commonly used hooks are useState for managing state and useEffect for handling side effects (like fetching data).

Example of useState:

 import React, { useState } from 'react';

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

   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>Click me</button>
     </div>
   );
 }

Example of useEffect

 jsxCopyEditimport React, { useState, useEffect } from "react";

 function FetchData() {
   const [data, setData] = useState([]);

   useEffect(() => {
     fetch("https://jsonplaceholder.typicode.com/posts")
       .then((response) => response.json())
       .then((json) => setData(json.slice(0, 5))); // Get only 5 items

     console.log("Fetching data...");
   }, []); // Empty dependency array means it runs only once (on mount)

   return (
     <div>
       <h2>Posts:</h2>
       <ul>
         {data.map((post) => (
           <li key={post.id}>{post.title}</li>
         ))}
       </ul>
     </div>
   );
 }

 export default FetchData;

🔹 Explanation:

useEffect(() => { ... }, []): Runs once when the component mounts.
Fetches data from an API and updates the state using setData().
The empty dependency array [] ensures the effect runs only on the initial render.

Setting Up Your First React App

Let’s quickly set up a basic React project. You can use Create React App (CRA), which is the easiest way to start.

Step 1: Install Node.js

Before you begin, make sure you have Node.js installed on your computer. You can download it from nodejs.org.

Step 2: Create a React App

Once Node.js is installed, open your terminal and run the following command:

npx create-react-app my-first-react-app

This will create a new folder with all the necessary files and dependencies for a React project.

Step 3: Navigate to the Project Folder

cd my-first-react-app

Step 4: Start the Development Server

npm start

This will launch your app in the browser at http://localhost:3000/.t:

Conclusion

React.js is a powerful and versatile library that has revolutionized the way we build web applications. Its component-based architecture, Virtual DOM, and declarative syntax make it a joy to work with, while its rich ecosystem and community support ensure that you’re never alone on your development journey.

Whether you’re building a small personal project or a large-scale application, React provides the tools and flexibility you need to bring your ideas to life. So, what are you waiting for? Start exploring React today and unlock the potential of modern web development!

If you found this guide helpful, feel free to share it with others who are just starting out with React. And if you have any questions or thoughts, drop them in the comments below. Happy coding! 🚀

Introduction to React.js: A Beginner’s Guide to Building Modern Web Applications