DEV Community

Cover image for 4 Ways of creating React Components
Rahul
Rahul

Posted on

4 Ways of creating React Components

Most developers probably know only the 2 most fundamentals types of components. But technology is developing every day, right? And now there are 4 types.

To be relevant, we must keep our tech skills up-to-date ;)


Functional Components

Also called dull or template components, their main purpose is to receive props/return JSX.

Use more as possible

import React from 'react'; 
const HelloWorld = () => {
    return (
    <span>Hello!</span>
    )
}

export default HelloWorld; 
Enter fullscreen mode Exit fullscreen mode

Class Components

They can do everything a functional component does, but more. Also called smart components. they can receive props, have state and lifecycle methods. We use and connect all functional components. Here, in our smart components.

Not everyone is a king. Use as less as possible

import React from 'react'; 
class HelloWorld extends 
React.Component {
    // LOGIC HERE
    render() {
        return (
        <span>Hello!</span>
        )
    }
}

export default HelloWorld; 
Enter fullscreen mode Exit fullscreen mode

Pure Components

This is generally used for optimizing the application. The pure components are also used for increasing performance as it works like shouldComponentUpdate() lifecycle methods which will reduce the number of operations in the application.

Essential component type which I suggest using basically when building larger apps

class example extends 
    PureComponent () {
        return (
        <Text>
        {this.props.text}
        </Text>
     ); 
  }
Enter fullscreen mode Exit fullscreen mode

High-Level Components (HOC)

Advanced technique in React for reusing component logic. HOCs are functions that return component (s). They are used to share logic with other components.

You can use to 'hack' the rule that you can only return one JSX element from a component

import React from 'react'; 
import MyComponent form './path'

class HelloWorld extends 
    React.Component {
        render() {
            return (
            <div>
                {this.props.myArray.map((el) => (<Comp data={el} key={el.key} /> ))}
                </div>)
        }
    }
export default HelloWorld; 
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“˜Thanks For Reading | Happy Coding โ˜•

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Top comments (3)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Hey, Rahul thanks :) for sharing this component variation. Actually, it's hidden confusion for newbies which takes time to understand them but after reading this post everything is cleared. Thanks a lot for this post but sorry I can't a pizza for you sorry for that :(

Collapse
 
rahxuls profile image
Rahul • Edited

Glad you like the post. I am currently not working on project (starting soon) So I don't need pizza now ๐Ÿ˜

Collapse
 
ravigithub profile image
Ravi Kasireddy

Supโค๏ธ