in Technology by
What are the differences between functional and class components?

1 Answer

0 votes
by

Before the introduction of Hooks in React, functional components were called stateless components and were behind class components on feature basis. After the introduction of Hooks, functional components are equivalent to class components.
Although functional components are the new trend, the react team insists on keeping class components in React. Therefore, it is important to know how these both components differ.
On the following basis let’s compare functional and class components:
 

  • Decalaration
    Functional components are nothing but JavaScript functions and therefore can be declared using an arrow function or the function keyword:
    function card(props){
     return(
       <div className="main-container">
         <h2>Title of the card</h2>
       </div>
     )
    }
    
    const card = (props) =>{
     return(
       <div className="main-container">
         <h2>Title of the card</h2>
       </div>
     )
    }
    

    Class components on the other hand, are declared using the ES6 class:
    class Card extends React.Component{
     constructor(props){
       super(props);
     }
    
     render(){
       return(
         <div className="main-container">
           <h2>Title of the card</h2>
         </div>
       )
     }
    }
    
  •  
  • Handling props
    Let’s render the following component with props and analyse how functional and class components handle props:
    <StudentInfo name=</sp

Related questions

0 votes
    What are the differences between controlled and uncontrolled components?...
asked Dec 5, 2020 in Technology by JackTerrance
0 votes
    Difference Between Functional and Non-Functional Testing...
asked Oct 17, 2020 in Technology by JackTerrance
0 votes
    Difference Between Functional Testing Vs Non-Functional Testing with Examples?...
asked Oct 17, 2020 in Technology by JackTerrance
0 votes
    What are the differences between Blockchain and Hyperledger?...
asked Jan 22, 2023 in Technology by JackTerrance
0 votes
    What are the differences between get and post method?...
asked Sep 28, 2021 in Technology by JackTerrance
0 votes
    What are the differences between TCP and UDP?...
asked Aug 16, 2021 in Technology by JackTerrance
0 votes
    What are the differences between Blazor Server and Blazor WASM?...
asked Aug 9, 2021 in Technology by JackTerrance
0 votes
    What are the differences between Local Metastore and Remote Metastore?...
asked Aug 6, 2021 in Technology by JackTerrance
0 votes
    What are the main differences between HDFS (Hadoop Distributed File System ) and Network Attached Storage(NAS) ?...
asked Aug 2, 2021 in Technology by JackTerrance
0 votes
    What are the differences between Azure Scale Sets and Availability Sets?...
asked Jul 31, 2021 in Technology by JackTerrance
0 votes
    What are the differences between ASP.NET Web Service and WCF?...
asked Jul 26, 2021 in Technology by JackTerrance
0 votes
    What are Differences between variables and constants in PHP?...
asked Jul 13, 2021 in Technology by JackTerrance
0 votes
    What are the differences between AngularJS and Angular?...
asked Jun 29, 2021 in Technology by JackTerrance
0 votes
    What are the differences between Daemon Logging and Container Logging?...
asked Jun 20, 2021 in Technology by JackTerrance
0 votes
    What are the main differences between array and collection?...
asked May 26, 2021 in Technology by JackTerrance
...