Composition and inheritance are two fundamental concepts in object-oriented programming, including React JS, for structuring and reusing code. However, React JS primarily favors composition over inheritance.

Composition in React JS refers to the practice of building components by combining smaller, reusable components together. This is achieved by nesting components inside other components to create complex UI structures. Composition promotes code reuse, modularity, and separation of concerns. It allows us to create encapsulated components that can be easily understood, tested, and maintained.

The example of composition in React JS is mentioned below -

import React from 'react';

 // Reusable components
 const Header = () => <h1>Header</h1>;
 const Sidebar = () => <div>Sidebar</div>;
 const Content = () => <div>Content</div>;
 const Footer = () => <footer>Footer</footer>;

 // Composed component
 const Page = () => {
   return (
     <div>
       <Header />
       <div className="container">
         <Sidebar />
         <Content />
       </d     iv>
  <Footer />
</div>
   );
 };

 export default Page;

In this example, the Page component is composed by combining smaller components together to create a complete page layout.

Inheritance in React JS

On the other hand, inheritance in React JS involves creating a hierarchy of components where child components inherit properties and behavior from parent components. While React does support component inheritance through the concept of "class components," it is generally recommended to favor composition over inheritance.

Class components can use inheritance to extend the functionality of a base component. However, this approach can lead to complex and tightly coupled code, making it harder to maintain and understand. React encourages the use of composition even for code reuse through techniques like higher-order components or render props.

The example Showing the inheritance in React JS is mentioned below -

 import React from 'react';

 // Base class component
 class Animal extends React.Component {
   speak() {
     console.log('Animal speaks');
   }
 }
 
 // Derived class component
 class Dog extends Animal {
   speak() {
     console.log('Dog barks');
   }
 }

 // Usage
 const MyComponent = () => {
   const dog = new Dog();
   dog.speak(); // Outputs: "Dog barks"
   return <div>My Component</div>;
 };

 export default MyComponent;

In this example, the Dog component extends the Animal component to inherit its speak() method. However, it's important to note that this example is primarily for demonstrating inheritance in React JS, and it is generally recommended to prefer composition over inheritance.