How Arrow Functions Work with useEffect in React: An In-Depth Guide

During a recent interview, I was asked an intriguing question about hoisting and its interaction with React. Specifically, the interviewer wanted to know why, in React, an arrow function defined below a useEffect hook can still be called inside that useEffect. Although I could not properly answer it but this question piqued my interest, and I decided to dive deep into the underlying concepts. Here’s what I found.

The Scenario

Here’s the situation described in the question:

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    myArrowFunction(); // This works!
  }, []);

  const myArrowFunction = () => {
    console.log("Arrow function called");
  };

  return <div>Check the console</div>;
};

export default MyComponent;

At first glance, it may seem surprising that this code works. After all, we know that arrow functions are not hoisted, unlike regular function declarations. So, why does React’s useEffect behave as if the function was defined before it was called?

To understand this, we need to break down several core JavaScript and React concepts.

1. What Is Hoisting in JavaScript?

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their scope during the compilation phase, even before the code is executed. This means you can use certain variables or functions before they are explicitly defined in the code.

Function Declarations vs. Function Expressions

• Function Declarations: These are hoisted entirely-both the variable and the function body are available before the line where they are defined.

hello(); // Works!

function hello() {
  console.log("Hello, world!");
}

• Function Expressions: These are not hoisted in the same way. Only the variable name is hoisted, not the function body. This means you’ll encounter a TypeError if you try to call the function before it is assigned.

hello(); // TypeError: hello is not a function

const hello = function () {
  console.log("Hello, world!");
};

Arrow Functions
Arrow functions are a special type of function expression. Like regular function expressions, only their variable name is hoisted—the actual function body remains uninitialized until the code execution reaches the assignment.

myArrowFunction(); // TypeError: myArrowFunction is not a function

const myArrowFunction = () => {
  console.log("Arrow function");
};

2. How React’s useEffect Works

In React, the useEffect hook allows you to perform side effects after the render phase of a component. Importantly:

useEffect Executes After Rendering:

• React does not execute the useEffect callback during the initial rendering phase. Instead, it schedules the useEffect callback to run after the DOM has been updated.

• This means that by the time useEffect runs, the entire body of the component function has already been executed, ensuring that all variables and functions within the component scope are fully initialized.

Function Scope and Execution Context:

• The useEffect hook has access to all variables and functions defined within the same scope. Since myArrowFunction is defined in the component scope, it is available for use when the useEffect callback is executed.

3. Why the Arrow Function Works in useEffect

Now let’s apply these concepts to the code in question. Here’s a step-by-step explanation:

Step 1: Component Rendering
When the component is rendered, the following happens in order:

• JavaScript parses the MyComponent function.

• It encounters the useEffect call and registers the callback to be executed later (after rendering).

• It initializes the variable myArrowFunction with the arrow function.

By the time React executes the useEffect callback, the myArrowFunction has already been defined, so it can be called without any issues.

Step 2: Execution Lifecycle
Here’s how the lifecycle works in this case:

Code Parsing:

• The entire MyComponent function is parsed.

• useEffect is registered, and myArrowFunction is initialized.

Rendering:

• The component’s output is rendered to the DOM.

useEffect Execution:

• After rendering, React runs the useEffect callback.

• At this point, myArrowFunction is fully defined and ready to use.

4. Common Misunderstandings

Misconception: Arrow Functions Are Hoisted
Arrow functions themselves are not hoisted. In this case, it works because useEffect runs after the function body has been fully executed, not because of hoisting.

Misconception: useEffect Runs Inline
useEffect does not execute inline during the parsing phase. It is scheduled to run after the render phase, ensuring all variables and functions in the component scope are available.

5. Temporal Dead Zone and React

The Temporal Dead Zone (TDZ) refers to the period between the start of a variable’s scope and its actual declaration where it cannot be accessed. In the code example, there is no TDZ issue because:

• The myArrowFunction is declared before the useEffect is executed.

• React’s lifecycle ensures that the useEffect callback does not run until after the component function has completed execution.

6. Summary

To summarize:

• Hoisting in JavaScript: Arrow functions are not hoisted, but variables declared with const or let are scoped to their block and are accessible after their declaration.

• React Lifecycle: useEffect does not execute immediately; it waits until the component has rendered.

• Execution Order: By the time the useEffect callback runs, all variables and functions within the component scope are initialized, including arrow functions.

This combination of JavaScript behavior and React’s execution model explains why you can use an arrow function inside a useEffect, even if it appears to be declared "later" in the code.

7. Key Takeaways for Interviews

If you’re asked this in an interview, here’s a concise way to answer:

• Arrow functions are not hoisted, but React’s useEffect executes after the component has been rendered.

• This ensures that any arrow function defined in the component scope is fully initialized and accessible by the time useEffect runs.

• The behavior relies on React’s lifecycle and JavaScript’s execution order, not on hoisting.

By understanding the interplay between JavaScript’s scoping rules and React’s rendering lifecycle, you can confidently tackle questions like this and demonstrate your expertise in modern JavaScript and React.

Feel free to share your thoughts or ask questions in the comments! Let’s discuss and learn together.