CODEWITHSUNDEEP
reactjshigher-order-components
Istvan Orban
Istvan Orban

Reputation: 1685

How the render process is going in React?

I just starting to get confused about the render process in React.

Let's say I've got a Higher Order Component what looks something like this:

const withHOC = () => WrapperComponent =>  {
    return class WithHOC extends React.Component {
        render() {
            //someProps => what will change...
            //...rest => won't change
            const { someProps, ...rest } = this.props
            return(
                <WrapperComponent {...rest} />
            )
        }
    }
}

This is where I am quite confused... as someProps will change the HOC itself will re-render. Is this means the WrappedComponent will be re-rendered as well?

I mean the WrappedComponent's props not changing. And how expensive can this be?

Upvotes: 0

Views: 186

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

React HOC is not a big deal to understand when you think it as just a parent component.

Now, guess what happens when child component receive the props from the parent component?

The child component will be re-rendered.

What happens to the parent component render?

The parent component is also re-rendered because its props changes.

The same thing applies to the HOC. Thus, WrapperComponent will also re-render whenever the props / state changes.

Upvotes: 1

Related Questions