React Functional Component Inheritance: Best Practices

Can React functional components support inheritance?

React does not follow the traditional inheritance model, but developers often look for ways to share logic between components. Some use composition, while others rely on higher-order components. Choosing the right approach helps keep code clean and easy to manage.

This article explores React functional component inheritance, best practices for structuring components, and ways to improve reusability in React apps.

Understanding Component Inheritance in React

What is Inheritance in React?

Inheritance is a core concept in object-oriented programming, allowing one class to derive properties and behavior from another. Traditional class components in React used the extends keyword to achieve inheritance. However, in functional components, inheritance is typically handled through composition rather than direct parent class implementation.

Why React Avoids Classical Inheritance

React encourages the composition model over traditional inheritance. The composition model ensures better flexibility, avoiding rigid dependency structures seen in classical class components. Directly using component inheritance can lead to issues with deep nesting and unclear dependencies, making debugging and scaling difficult.

Comparison: Inheritance vs. Composition in React

How to Implement Inheritance in React Functional Components

Using the Composition Model for Code Reusability

The composition model allows one component to wrap other components, passing down properties and logic. This approach avoids deep component inheritance while promoting code reusability.

Example: Using Composition to Reuse Code

1const WrapperComponent = ({ children }) => {
2  return <div className="wrapper">{children}</div>;
3};
4
5const ChildComponent = () => {
6  return <p>This is a child component inside a wrapper.</p>;
7};
8
9const AppComponent = () => {
10  return (
11    <WrapperComponent>
12      <ChildComponent />
13    </WrapperComponent>
14  );
15};
16
17export default AppComponent;

​

In this example, the parent component (WrapperComponent) manages the layout, while the child component (ChildComponent) is injected dynamically. This promotes code reusability and makes the structure more maintainable.

Using Higher-Order Components (HOCs) for Inheritance-Like Behavior

HOCs provide a way to extend the functionality of an existing component without modifying it directly.

Example: Creating a Higher-Order Component (HOC)

1const withLogging = (WrappedComponent) => {
2  return (props) => {
3    console.log("Component is rendering with props:", props);
4    return <WrappedComponent {...props} />;
5  };
6};
7
8const ButtonComponent = ({ label }) => {
9  return <button>{label}</button>;
10};
11
12const EnhancedButton = withLogging(ButtonComponent);
13
14const AppComponent = () => {
15  return <EnhancedButton label="Click Me" />;
16};
17
18export default AppComponent;

​

This example shows an HOC (withLogging) that logs component's properties before rendering. The EnhancedButton component extends the behavior of ButtonComponent, achieving a form of component inheritance without deep nesting.

When to Use Component Inheritance in React?

While component inheritance is not the recommended approach in React, there are situations where it may be useful.

1. Sharing Logic Between Multiple Components

If multiple React components share the same behavior, HOCs or hooks can help manage shared logic instead of relying on direct inheritance.

2. Extending Functionality Without Rewriting Components

When an already existing component needs extended behavior without modification, HOCs and render props offer flexible alternatives.

3. Structuring Components Dynamically

Some complex React apps require dynamically structured UI elements. Using composition ensures flexible, scalable designs.

Common Pitfalls of Component Inheritance in React

1. Overcomplicating Component Structures

Deep component inheritance creates tightly coupled components, making debugging difficult. The composition model provides a cleaner alternative.

2. Unnecessary State Dependencies

Overusing component inheritance can lead to unnecessary state values being shared between components, causing unexpected behavior.

3. Mixing Inheritance with Composition

Using both component inheritance and composition in the same architecture leads to confusion and maintainability issues.

Best Practices for Implementing Inheritance in React

1. Prefer Composition Over Inheritance

Instead of using a parent class, wrap smaller components inside a parent component for better modularity.

2. Use Hooks for Shared Logic

Instead of relying on component inheritance, use hooks to share state and logic across components.

Example: Sharing Logic with Hooks

1import { useState } from "react";
2
3const useCounter = () => {
4  const [count, setCount] = useState(0);
5  const increment = () => setCount(count + 1);
6  return { count, increment };
7};
8
9const CounterComponent = () => {
10  const { count, increment } = useCounter();
11  return (
12    <div>
13      <p>Count: {count}</p>
14      <button onClick={increment}>Increase</button>
15    </div>
16  );
17};
18
19export default CounterComponent;

​

3. Utilize Context API for State Sharing

Instead of tightly coupling state in a parent class, use the React Context API to manage shared state efficiently.

Example: Using Context API for Shared State

1import { createContext, useContext, useState } from "react";
2
3const CounterContext = createContext();
4
5const CounterProvider = ({ children }) => {
6  const [count, setCount] = useState(0);
7  return (
8    <CounterContext.Provider value={{ count, setCount }}>
9      {children}
10    </CounterContext.Provider>
11  );
12};
13
14const DisplayCounter = () => {
15  const { count } = useContext(CounterContext);
16  return <p>Count: {count}</p>;
17};
18
19const IncrementButton = () => {
20  const { setCount } = useContext(CounterContext);
21  return <button onClick={() => setCount((prev) => prev + 1)}>Increase</button>;
22};
23
24const AppComponent = () => {
25  return (
26    <CounterProvider>
27      <DisplayCounter />
28      <IncrementButton />
29    </CounterProvider>
30  );
31};
32
33export default AppComponent;

​

Final Thoughts on React Functional Component Inheritance

React functional component inheritance is not a built-in feature, but there are better ways to share code. Patterns like hooks, HOCs, and the Context API help keep components flexible and reusable.

By focusing on composition, developers can build scalable applications without deep component inheritance. Keeping components modular and easy to manage leads to better performance and cleaner code.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.