Why airbnb style guide force eslint rule react/function-component-definition

Question

I installed ESLint to a ReactJS project with Airbnb guide style. The ESLint rules end up showing me the below error when I am using an arrow function to implement the component

Can someone please explain to me why the Airbnb style guide prefers the deprecated functional component over the arrow function?

I went through ESLint documentation and the internet for that rule but they only explain when the rule gets triggered and how to fix it.

import React from 'react';
import {
  Link
} from 'react-router-dom';
import {
  useDispatch
} from 'react-redux';
import {
  signInWithEmailAndPassword
} from 'firebase/auth';
import {
  auth
} from '../firebase';
import {
  logIn
} from '../features/authentication/authenticationSlice';

const LogInPage = () => {
  //ESLint error occurs on the above line
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    const email = event.target[0].value;
    const password = event.target[1].value;
    const rememberMe = event.target[2].checked;

    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const expiryTime = Math.floor(new Date().getTime() / 1000.0) + 86400;
        const loginDetails = {
          accessToken: userCredential.user.accessToken,
          email: userCredential.user.email,
          name: userCredential.user.displayName,
          uid: userCredential.user.uid,
          expiryTime,
        };
        if (rememberMe) {
          localStorage.setItem('loginDetails', JSON.stringify(loginDetails));
        } else {
          sessionStorage.setItem('loginDetails', JSON.stringify(loginDetails));
        }
        dispatch(logIn({
          isLoggedIn: true,
          loginDetails,
          rememberMe
        }));
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });
  };

  return ( 
  <div className = "h-full w-full flex flex-col items-center justify-center gap-10">
    <h1 className = "text-xl font-bold" > Log In Page </h1>
    <form 
      className = "flex flex-col items-center gap-5"
      onSubmit = {handleSubmit} 
    >
      <input 
        className = "py-2 px-4 rounded w-80"
        label = "E-Mail Address"
        name = "eMailAddress"
        type = "text" 
      />
      <input 
        className = "py-2 px-4 rounded w-80"
        label = "Password"
        name = "password"
        type = "password" 
      />
      <div className = "flex flex-row gap-3" >
        <input 
          type = "checkbox"
          id = "RememberMe"
          name = "RememberMe"
          value = "RememberMe" 
        />
        <label htmlFor = "RememberMe" > Remember Me </label> 
      </div>
      <input 
        className = "bg-black text-white py-2 px-8 rounded"
        type = "submit"
        value = "Submit" 
      />
      <Link 
        className = "text-blue-600 underline"
        to = "/sign-up" 
      > 
        Sign Up 
      </Link> 
    </form> 
   </div>
  );
};

export default LogInPage;

PS: Functional components are not deprecated. Since ES6 arrow functions seem to be the go-to form of implementation.

Answer 1

deprecated functional component

Since when functional component is deprecated?

Airbnb prefers function declaration over arrow function because of name inference. In older browsers arrow function components would be unnamed, which makes debug painful. If this is not a concern to you you can use arrow function.

Personally I prefer function declaration most of the time because it easier to declare typescript generics. I only use arrow functions for callbacks.

https://github.com/airbnb/javascript/tree/52e710c14ec0197cfefe131061e1fe41c966f93b/react#class-vs-reactcreateclass-vs-stateless

Answer 2

@ljharb from the AirBnB team (and JavaScript TC39 committee) described this in November 2022 in airbnb/javascript#2672:

1. Why do we need to use function declaration rather than arrow function for stateless components?

For 1, because arrow functions don't have explicit names, only inferred ones, and that inference will surprise you when you inevitable do something like const Foo = React.memo(() => <div />);.

In particular, as in the question how to set displayName in a functional component [React], React gives better debugging error messages when functional components have clear names. For arrow functions, these names need to be specified explicitly, but via AirBnB's style guide the requirement for named functions effectively ensures that each function component will get a name for debugging.