What is the difference between Higher Order Component (HOC) and Inheritance in React native component

user_4058506 0
Viewed 2029

I am new to react native from .net background,

Here the Question is how HOC is different from inheritance in OOPS concept by having a parent class with base properties and child that extends the Base and use the state, properties and base methods from the Base class.

Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship in React Components .?

For Example:

Parent.js Looks like

class Parent extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            value: "Parent",
            BaseText: "Inheritance Example"
        }
    }

    onUpdate = () => {
        console.log("Update called at Parent")
    }
}

Child.js which extends Parent.js

class Child extends Parent
{
    constructor(props)
    {
        super(props);
       //this state should inherit the properties of Parent and override only the value property
        this.state = {
            value: "Child",
        }
    }

    onUpdate = () => {
        super.onUpdate();
        console.log("Update called at Child view")
    }



    render()
    {
        return(
            <View>
                <Text> Child View</Text>
            </View>
        )
    }
}

The GrandChild.js extends from Child.js 

class GrandChild extends Child
    {
        constructor(props)
        {
            super(props);
           //this state should inherit the properties of Child, Parent and properties specific to this
            this.state = {
                value: "GrandChild",
                Name: "Test Grand Child"
            }
        }

        onUpdate = () => {
            super.onUpdate();
            console.log("Update called at Grand Child view")
        }



        render()
        {
            return(
                <View>
                    <Text> Grand Child View</Text>
                </View>
            )
        }
    }

Is this the right way of implementing abstraction in react native say Parent class will have the common state properties and the child inherits the Parent state and has its own properties.

How to inherit state and how to update values to state in this case .?

es6-class react-native reactjs ecmascript-6
1 Answers

React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.

This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:

const withBaz = Comp => <Comp baz />

@withBaz
class Bar extends Foo { ... }

This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.

There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.

user_37315010
Related