React - isCompositeComponent() method

---

---

React JS is all about dividing our app into smaller components, and each of these components has its own lifecycle. React provides built-in methods that we can use at different stages in a components life.

In React JS, the isCompositeComponent() method is basically used to check if an instance is a user-defined component. It helps us find whether a particular element is a custom component created by the developer or not. So we can say that it helps us find out if a particular part of our app is a component we have created or not.

Syntax

isCompositeComponent(instance)

Parameters

instance − This is the element that we want to check. This method is used to check that an element or component instance is a user-defined component or not. So we can check any React element or component instance to see if it is a custom component or built-in.

Return Value

It returns a boolean value, true if the provided element is a user-defined component, false otherwise.

Example - Simple React App

Now, we will create a simple React app that shows how we can use this method. We will create a basic component called App and use isCompositeComponent() in it.

App.js

import React from 'react';
import { isCompositeComponent } from 'react-dom/test-utils';

// Define App Component
const App = () => {

   // Function to show isCompositeComponent()
   function myFunction() {
      var a = isCompositeComponent(el);
      console.log("It is an element :", a);
   }   
   const el = <div>
   <h1>element</h1>
   </div>
   
   // Return our JSX code
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={myFunction}>Click me !!</button>
      </div>
   );
}

export default App;

Output

In the code, we saw a simple component called App. There is a function in this component named myFunction that uses isCompositeComponent() to figure out that the el element is a user-defined component. When we click the Click me!! button, the outcome is logged in the console.

Example - Checking a Composite Component

This app consists of a simple functional component named FunctionalComponent. The main App component renders a button that, when clicked, checks whether FunctionalComponent is a composite component using the isCompositeComponent() method.

App.js

import React from 'react';
import { isCompositeComponent } from 'react-dom/test-utils';

const FunctionalComponent = () => {
   return <div>Hello from FunctionalComponent!</div>;
};
const App = () => {
   function checkComponent() {
      const isComposite = isCompositeComponent(<FunctionalComponent />);
      console.log("Is FunctionalComponent a composite component?", isComposite);
   }   
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={checkComponent}>Check FunctionalComponent</button>
      </div>
   );
};

export default App;

Output

Example - Checking Another Composite Component

This app features a simple class component named ClassComponent. The main App component renders a button that, when clicked, checks whether ClassComponent is a composite component using the isCompositeComponent() method.

App.js

import React, { Component } from 'react';
import { isCompositeComponent } from 'react-dom/test-utils';

class ClassComponent extends Component {
   render() {
      return <div>Hello from ClassComponent!</div>;
   }
}
const App = () => {
   function checkComponent() {
      const isComposite = isCompositeComponent(<ClassComponent />);
      console.log("Is ClassComponent a composite component?", isComposite);
   }   
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={checkComponent}>Check ClassComponent</button>
      </div>
   );
};

export default App;

Output

Summary

The isCompositeComponent() method is useful for figuring out whether a specific element of our React app is a component we created. For user-defined elements, it returns true, otherwise, it returns false.