Difference between this two js in react

Question

I start to learn React JS and anyone can explain me the difference between those two files? Both of them do the same thing.

First JS

import React, { useEffect, useState } from 'react'
import Product from './Product';
import './Today.css';
import { Link } from 'react-router-dom';
import { render } from '@testing-library/react';

export default class Today extends React.Component {

    state = {
        loading : true,
        fixture : null
    };

    async componentDidMount() {
        
        const OPTIONS = {
            method : 'GET',
                headers : {
                    'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
                    'X-RapidAPI-Key' : '###'
                }
        };
        const url = 'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18';
        const response = await fetch(url,OPTIONS);
        const fixtures = await response.json();
        this.setState({ fixture: fixtures.api.fixtures, loading: false});
        const teamData = fixtures.api && fixtures.api.fixtures > 0 ? fixtures.api.fixtures : [];
        console.log(this.state);
    }

    render() {
        return (
            <div className="today">
               {this.state.loading || !this.state.fixture ? (
               <div><img src=""/></div> 
               ) : ( 
               <div>
                   <div>
                       {this.state.fixture.slice(0,10).map(fixtureToday => (
                         <div>{fixtureToday.homeTeam.team_name}</div>
                       ))}
                    </div>
               </div>
               )}
            </div>
        )
    }
}

Second one

import React, { useState, useEffect } from 'react';
import './AnotherDay.css';
import { Link } from 'react-router-dom';

function AnotherDay() {

    useEffect(() => {
        fetchItems();
    },[]);

    const OPTIONS = {
        method : 'GET',
        headers : {
            'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
            'X-RapidAPI-Key' : '###'
        }
    };
    
    const [fixtures, setItems] = useState([]);

    const fetchItems = async () => {
        const data = await fetch(
            'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18' , OPTIONS
            );
        const fixtures = await data.json();
        const teamData = fixtures.api && fixtures.api.fixtures.length > 0 ? fixtures.api.fixtures : [];

        console.log(teamData);
        setItems(teamData);
    }

  return (
    <div>
      {fixtures.slice(0,10).map(fixture => (
        <div>{fixture.homeTeam.team_name}</div>
      ))}
    </div>
  );
}

export default AnotherDay;

And in the App.js I have

import React from 'react'
import './Today.css';
import { Link } from 'react-router-dom';
import Today from './Today ';
import AnotherDay from './EvenimenteMaine';

function TodayEvents() {
    return (
        <div className="today">
        <div className="todayEvents">
           <Today />
        </div>
        <div className="anotherDayEvents">
            <AnotherDay />
        </div>

        </div>
    )
}

export default TodayEvents

I have the same result in the both divs. My question is, what is the difference? The first one is a class and the second one is a function? Which one is the correct way?

Thanks, maybe is a noob question but I'm new to learning React.

This really is a stylistic question. Neither is inherently better, although there are things you can do with class components still that you can't do with functional components. However, functional components tend to be easier to write and test, and can let you express the same functionality in less code. It really just depends. — rfestag, Jul 18 '20 at 16:13
While that's true, the question of whether something is "correct" in this instance is opinion, and depends on more context than what is given. We could say functional components are potentially more future-proof (although React has no plans to drop support for class components). If a code base makes heavy use of class components already, introducing functional components to a team that hasn't picked them up yet could cause other issues. React doesn't recommend rewriting existing class components as functional components. — rfestag, Jul 18 '20 at 16:30

score 1 · Answer 1 · answered Jul 18 '20 at 16:16

The first example is a class component the second one is a functional component. React development is moving away from classes toward the functional components. useEffect is supposed to replace several life cycle functions from class components.

Two things to look into functional components and class components. The second set of things to look up is life cycle functions and functional component hooks.

Here is a link that will explain at a high level the differences. https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg

Difference between this two js in react

1 Answers1