Types of Components in React Native

React Native components can be broadly categorized into four types: Class Components, Functional Components, Pure Components, and Higher-Order Components (HOC). Each type has its own use cases and benefits.

1. Class Component

A Class Component is a more traditional way of defining a component in React Native. It uses ES6 classes and can manage its own state and lifecycle methods.

Example:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello, this is a class component!"
    };
  }

  componentDidMount() {
    console.log("Component did mount");
  }

  componentDidUpdate() {
    console.log("Component did update");
  }

  componentWillUnmount() {
    console.log("Component will unmount");
  }

  render() {
    return (
      <View>
        <Text>{this.state.message}</Text>
      </View>
    );
  }
}

export default MyClassComponent;        

In this example, the component logs messages to the console at different stages of its lifecycle. It also renders a text message from its state.

2. Functional Component

A Functional Component is a simpler way to create components using functions. These components do not have their own state or lifecycle methods but can use hooks like useEffect to achieve similar functionality.

Example:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const MyFunctionalComponent = () => {
  const [message, setMessage] = useState("Hello, this is a functional component!");

  useEffect(() => {
    console.log("Component did mount");
    return () => {
      console.log("Component will unmount");
    };
  }, []);

  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
}

export default MyFunctionalComponent;        

In this example, useEffect is used to mimic the lifecycle methods componentDidMount and componentWillUnmount.

Functional Components: Stateless

Functional components are simple JavaScript functions that return JSX and are stateless by design. They accept props as an argument and do not manage their own state or lifecycle methods. With React hooks, they can now handle state and side effects, making them capable of being stateful.

Class Components: Stateful

Class components are ES6 classes that extend React.Component and are inherently stateful. They can manage their own state and utilize lifecycle methods like componentDidMount and componentDidUpdate. This makes them suitable for complex components requiring state and lifecycle management.

3. Pure Component

A Pure Component is used to prevent unnecessary re-renders. It performs a shallow comparison of props and state, and if they haven't changed, it does not re-render the component.

Example:

import React, { PureComponent } from 'react';
import { View, Text, Button } from 'react-native';

class MyPureComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count });
  }

  render() {
    console.log("Component is rendering");
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.incrementCount} />
      </View>
    );
  }
}

export default MyPureComponent;        

In this example, the component only re-renders if the count state changes. Since this.setState is called with the same value, the component will not re-render, demonstrating the use of a pure component.

4. Higher-Order Component (HOC)

A Higher-Order Component is a function that takes a component and returns a new component. It is used to reuse component logic.

Example:

import React from 'react';
import { View, Text, Button } from 'react-native';

const withColorChange = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        color: "red"
      };
    }

    toggleColor = () => {
      this.setState({ color: this.state.color === "red" ? "blue" : "red" });
    }

    render() {
      return (
        <View>
          <WrappedComponent color={this.state.color} />
          <Button title="Toggle Color" onPress={this.toggleColor} />
        </View>
      );
    }
  }
}

const ButtonComponent = ({ color }) => (
  <Button title="Click Me" color={color} onPress={() => {}} />
);

const EnhancedButtonComponent = withColorChange(ButtonComponent);

export default EnhancedButtonComponent;        

In this example, withColorChange is a higher-order component that adds color-changing functionality to ButtonComponent. The EnhancedButtonComponent will have the ability to toggle its color between red and blue.