Last active
February 27, 2022 06:56
-
-
Save Restuta/07005e844a1d46eca678 to your computer and use it in GitHub Desktop.
React HOC (Higher Order Component) Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* HOC fundamentally is just a function that accepts a Component and returns a Component: | |
(component) => {return componentOnSteroids; } or just component => componentOnSteroids; | |
Let's assume we want to wrap our components in another component that is used for debugging purposes, | |
it just wraps them in a DIV with "debug class on it". | |
Below ComponentToDebug is a React component. | |
*/ | |
//HOC using Class | |
//it's a function that accepts ComponentToDebug and implicitly returns a Class | |
let DebugComponent = ComponentToDebug => class extends Component { | |
render() { | |
return ( | |
<div className="debug"> | |
<ComponentToDebug {...this.props}/> | |
</div> | |
); | |
} | |
}; | |
//similar HOC using pure function | |
//it's a function that accepts ComponentToDebug and explicitly returns a Functional component | |
let DebugComponent = (ComponentToDebug) => { | |
return (props) => ( | |
<div className="debug"> | |
<ComponentToDebug {...props}/> | |
</div> | |
); | |
}; | |
//above component can be simplified omitting extra () around parameters and using implicit return | |
let DebugComponent = ComponentToDebug => ( | |
props => ( | |
<div className="debug"> | |
<ComponentToDebug {...props}/> | |
</div> | |
) | |
); | |
//or even further omitting extra () | |
let DebugComponent = ComponentToDebug => props => ( | |
<div className="debug"> | |
<ComponentToDebug {...props}/> | |
</div> | |
); | |
//finally any definition can be used like that: | |
DebugComponent(MyComponent); | |
Can I pass multiple Components into the HOC? If so how?
@yaakovbeiss just pass additional argument to function
can i wrap an HOC in another HOC,Is it valid?
@adnan1naeem yes. You can do this. In fact, a HOC returns a component (you can render or pass it to another HOC).
As a reference, take a look into Recompose. It does this a lot (https://github.com/acdlite/recompose)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for the reference.
Just a note, if you use anonymous functions (i.e., those that you declare implicitly or on the fly) then that function will be named
<Unknown/>
by React. This is immediately evident if you are debugging using React tools.The work around for this is to either name your class even when you are declaring it inline, like the example below. Of course you could just declare the
ComponentNamedDebug
class elsewhere and supply it to theDebugComponent
function yourself.In order to have named inline functional presentational components, you can do the following.
I am not sure if this improves readability in any way, but it's there. Alternatively, if you want to use normal functions, here is how you can do it.