In Gatsby what is the difference in exteding component vs arrow function

Question

I'm trying to use gatsby with wordpress as a source. It's been a fun process but I'm new to react and JS in general.

Can someone tell me the difference between these two methods?

import { Link } from "gatsby"
import React, { Component } from "react"

class StaticMenu extends Component {
  render() {

    return (
      <nav>
        <ul>
          <li><Link to="/">home</Link></li>
          <li><Link to="/blog">blog</Link></li>
          <li><Link to="/page-list">pages</Link></li>
        </ul>
      </nav>
    )
  }
}

export default StaticMenu

and

import React from 'react'
import { Link } from "gatsby"

const WPMenu =() => (
  <nav>
    <ul>
      <li><Link to="/">home</Link></li>
      <li><Link to="/blog">blog</Link></li>
      <li><Link to="/page-list">pages</Link></li>
    </ul>
  </nav>
);

export default WPMenu

or better yet...which I should use?

Well, one is class and one is arrow function. In the first one, you use state inside the class, in the second one you use hooks as state. I prefer functions, but you can use whatever you want. — Mirakurun, Feb 10 '20 at 18:45
Check out these resources: https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108 , https://overreacted.io/how-are-function-components-different-from-classes/ — wlh, Feb 10 '20 at 18:45
@wlh your first resource is pre-hooks version, so it might mislead OP. — Mirakurun, Feb 10 '20 at 18:48
"Which should I use?" is primarily opinion-based, thus off-topic. As for the differences, it was already [asked and answered](https://stackoverflow.com/q/36097965/1218980) multiple times. — Emile Bergeron, Feb 10 '20 at 18:50
@Mirakurun Perhaps, thought the article includes updates for hooks. — wlh, Feb 10 '20 at 18:56
@wlh yes, but it says in 10 lines that you can't use state in function components, and only in one "now you can". Thus I said it MIGHT mislead OP. — Mirakurun, Feb 10 '20 at 18:58

Zohaib Ijaz · Accepted Answer · 2020-02-10T19:06:23.407

Both are valid syntax for creating a component. Community is moving towards functional components(arrow functions included) after the introduction of Hooks Api

Previously, functional components were used just as presentational components without state and a functional component renders on each render of parent regardless of components props changed or not (before hooks, memo) and class based components were used as stateful components aka Containers (kindly don't fight over containers).

But now we have api like memo which allows us to use functional components which do not re-render on every render of parent unless props get changed so it provides shallow comparison of previous props and current props. You can also pass a second argument to add your custom logic to determine when do you want your component to re-render.

let Person = (props) => <div>{props.name}</div>;
Person = memo(Peron, someComparisonCallBackOrNothing);

After the introduction of React Hooks like useState, useEffect, use*, we can use functional components as stateful components

const Person = props => {
   const [loading, setLoading] = useState(false);
   const [person, setPerson] = useState({});
   const getPerson = async (id) => {
       const data = await axios.get(`/persons/${id}`);
       setPerson(data);
   }
   useEffect(() => {
      // Get user data from some api
      getPerson();
   }, [props.id]);  /// will be triggered on componentDidMount or if props.id changes
}

In Gatsby what is the difference in exteding component vs arrow function

1 Answers1