Understanding Callback Functions, Arrow Functions, and useEffect in React

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

Concept	Purpose
Callback	Function passed to another function and executed later
Arrow Function	Shorter syntax for functions, useful in React
`useEffect`	React hook to run side effects after render