What Are React Components

by
Previous
Next

Components are a powerful method in React. They serve as building blocks for our app’s structure. Each component represents a small part of the UI, like a button, a form, a navbar, or a product card.

A React app build by multiple components same as building a house by multiple bricks.

In React, Components allow developers to break down the user interface parts into reusable pieces that can manage their own state and props.

What Is React Component?

A React component is a self-contained piece of code that controls how our website section looks on display.

It is a JavaScript function that:

  • Takes inputs (props),
  • Returns a React element (which looks like HTML),
  • And tells React what to show on the screen.

Each component contains its structure, logic, and styling to create UI by combining multiple components.

Simple code example of a React component:

// A simple React component
function Welcome() {
  return <h1>Hello, world!</h1>;
}

Types of React Components

React components have two main types: Functional Components and Class Components

a) Functional Components

A functional component in React is just a normal JavaScript function that returns JSX (looks like HTML). Today, it is the most common way to build components because it is:

  • Short and easy to write
  • Clean and readable
  • Powerful (because of Hooks)

The functional component is only used for simple UI, but now it can also manage state, side effects, and more using Hooks.

Simple syntax of functional components:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
  • This component shows a greeting like: “Hello, Harry!”.
  • {props.name} is passed the name when it is used.

b) Class Components

The Class components are based on ES6 JavaScript classes. This was the main way to build powerful React components before Hooks.

These components are:

  • Use a render() method to return JSX
  • Use the componentDidMount and componentWillUnmount lifecycle methods.

Example of class component:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Component Structure: Props and State

Components structure are built and organized by two main parts:

  • Props (properties)
  • state (internal object)

a) Props (properties)

Props are used to pass the values from the parent component to the child component.

Props are read-only, which means the child component can use them without any changes.

It is also used to customize components and pass data between them.

A simple example of Props:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Harry" />

In this example name is a prop that is passed to the welcome component.

We are covered whole explanation about React Props. Click on the link and Read More

b) State (Internal Object)

The state is like a storage area inside a component where we can store data that can change. For example, if you want to count how many times a button is clicked, that countable number should be saved in the state.

Example of Using State in a Functional Component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

We are covered whole explanation about React State. Click on the link and Read More

Higher-Order Components (HOCs)

A Higher-Order Component (HOC) is a function in React that takes a component as an argument and returns a new component. HOCs are used to reuse component logic and add functionality.

Simple Example of an HOC:

function withGreeting(WrappedComponent) {
  return function EnhancedComponent(props) {
    return <WrappedComponent {...props} greeting="Hello!" />;
  };
}

const EnhancedComponent = withGreeting(SomeComponent);

Component Composition

Component Composition in React means combining small components to build a complete user interface.

Developers break the UI into smaller parts and arrange them like building blocks, without writing one big component.

For example:

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

In this code:

The App component is the main or parent component.

We use three other components: Header, MainContent, and Footer inside the app component. and these are the child components that each child handles their own small part of the page.

This method makes the code more organized, easier to understand, and reusable.

What Are Pure Components and Memoization in React?

A pure component is a special component that only re-renders when its props or state actually change. it doesn’t re-render if the incoming data is the same as before, which helps to avoid unnecessary updates and improve performance.

  • Class Components use the React pre-built feature, and it is called React.PureComponent
  • Functional Component uses React.memo() function to wrap another component.

Code Example of Functional Component:

const Greeting = React.memo(function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
});
  • A greeting is a functional component that shows a name.
  • We wrapped it with React.memo() function, so if the name prop stays the same, React won’t re-render this component.
  • This method improves performance in large apps where many components are unnecessarily re-rendered.
Note: Re-render means React recalculates what should be showing and updates on the screen if something has changed.

Understand Class Component Lifecycle

Class component includes three main phases: Mounting, Updating, and Unmounting. These phases provide different methods that allow developers to execute code at specific points.

Three main phases of class component lifecycle:

  • Mounting
  • Updating
  • Unmounting

1. Mounting
You can use the following methods when the component is created and added to the screen for the first time.

  • constructor() – This is the first method to set up the initial state and run.
  • componentDidMount() – This function runs after the component has been added to the screen. like fetch data or start timers.

2. Updating
This phase happens when something changes in the component, like new props added or something changes in state. and re-renders the component to show the new data.

  • shouldComponentUpdate() – Allows you to control the component rendering.
  • componentDidUpdate() – This function runs after the component has updated on the screen.

3. Unmounting
This final phase works when the component is removed from the screen.

  • componentWillUnmount() – When you switch to a new page, you don’t need to previous component. so this function cleans the side effects (like event listeners or timers) of that component.

Example:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted!');
  }

  componentWillUnmount() {
    console.log('Component unmounted!');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Code Explanation:

  • The component starts with a count of 0.
  • When it appears on the screen, componentDidMount() runs and logs a message
  • When it is removed from the screen, componentWillUnmount() runs and logs another message.

Previous
Next

Leave a Comment