This content originally appeared on DEV Community and was authored by rajeshwari rajeshwari

Sure! Here’s a blog post that explains callback functions, arrow functions, and how they relate to useEffect in React. You can use or modify this for your own learning or website.

Understanding Callback Functions, Arrow Functions, and useEffect in React

When working with React, you’ll often come across callback functions, arrow functions, and the powerful React hook called useEffect. These concepts are key to writing clean, efficient, and bug-free React applications.

Let’s break each of them down and then see how they all work together.

What is a Callback Function?

A callback function is simply a function passed as an argument to another function, and then executed later.

Example:

function greet(name, callback) {
  console.log("Hi " + name);
  callback();
}

function sayBye() {
  console.log("Bye!");
}

greet("John", sayBye);

Output:

Hi John
Bye!

In React, callback functions are often used in event handlers or as props to child components.

What is an Arrow Function?

An arrow function is a shorter way to write a function in JavaScript. It also binds this differently compared to regular functions (more predictable in React).

Example:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

In React, arrow functions are commonly used inside components, especially for event handlers.

Example:

const handleClick = () => {
  console.log("Button clicked!");
};

What is useEffect?

The useEffect hook lets you run code after the component renders. It’s useful for side effects like data fetching, subscriptions, or manually changing the DOM.

Syntax:

useEffect(() => {
  // code to run after render
}, [dependencies]);

Example:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

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

  return <h1>Timer: {count}</h1>;
}

How Do They Work Together?

Inside useEffect, you often use arrow functions to define the effect code and the cleanup function.

Also, you might pass callback functions into your custom hooks or utility logic to run something after an action, like a network request or timeout.

Example using both:

useEffect(() => {
  const fetchData = async () => {
    const data = await fetchSomeAPI();
    setState(data);
  };

  fetchData();
}, []);

Summary

Understanding how to use callback and arrow functions inside useEffect will help you write cleaner, more effective React code.

If you’d like a downloadable or shareable version (Markdown, HTML, etc.), let me know!

This content originally appeared on DEV Community and was authored by rajeshwari rajeshwari