React Native is a JavaScript framework for building mobile apps. It lets you use React, a popular JavaScript library, to create user interfaces. But instead of developing apps for iOS or Android separately, you can create a single app that works on both platforms. The Higher order component in React works like a savior. You’ll figure it out as you go down through the blog.
React Native has been around since 2015 and has gained popularity in the past year. There are several reasons for this:
First, React Native makes it easy to reuse code between platforms. If you have any React code already written, you can reuse that when creating your mobile app with React Native. It saves time and effort in development.
Second, the community around React Native is large and active. Many people are willing to help out if you get stuck – whether on Stack Overflow or elsewhere online. It means that there’s usually someone available to answer your questions when learning React Native.
Third, there are some great tools available specifically for developing with react native. For example, Expo allows you to build and deploy your apps without installing Xcode or Android Studio. And CodePush lets you update your app without going through the App Store/Google Play process.
What is Higher Order Component in React Native?
Higher order components (HOC) are one of the most powerful features of React Native. They allow you to abstract common functionality and share it between multiple components. In this article, we’ll take a look at what higher-order components are and how to use them in your own projects.
Higher-Order Component’s Structure
A HOC’s structure is just like a HOF in React. Like HOF, we don’t modify or mutate components. We create new components. It has no side effects and returns only a new component. Let me shed light on HOC’s structure.
- It is a component
- HOC takes another component as an argument
- It returns a new processed component
- The final component can render the original component
A basic structure is as follows
import React from 'react';
const higherOrderComponent = (WrappedComponent) => {
class HOC extends React.Component {
render() {
return <WrappedComponent />;
}
}
return HOC;
};
What is a Higher Order Component?
According to React, a higher-order component is simply a function that takes another function as an argument. This second function is then used to create a new component. Let’s take a look at an example:
import { withStyles } from 'react-native';
const HOC = withStyles ({ backgroundColor : 'red' });
export default class App extends Component {
render ( ){
return < HOC > Hello world ! </ HOC >;
}
}
In this code, we’re using the withStyles() function from React Native. This function takes an object as its argument and sets the background color of our app to red. We then create a new component called App that uses the HOC. When we run this code, our app will have a red background color.
So how does this work? The withStyles() function actually returns another function that we can use to create our own custom components. We can also pass arguments into this returned function, which will be used when creating our custom component. In our example, we passed in the object containing the background color property. This means that every time we create an instance of an app, it will have its background set to red.
Sounds a bit hard? No worries! Let me give you a simple example of HOF first.
function devidedBy(x) {
return function(y) {
return x / y;
};
}
Now, have a close look at the above code snippet. It works like a function generator. The function devidedBy() calls another function and returns the calculated value. This is the phenomenon of a higher-order function. What if we pass a value through the devidedBy(x) function? Let’s check.
function devidedBy(x) {
return function(y) {
return x / y;
};
}
const result = devidedBy(10);
console.log(result(2))
Output: 5
Use of React Higher Order Components
There are several different types of HOCs, but all of them share the same basic functionality. A HOC takes one or more input components and returns a new component that wraps those input components. The returned component has enhanced functionality, thanks to the HOC.
One common use for HOCs is to add state management capabilities to React components. For example, you might want a component that displays data from a database, but you don’t want to manage the state yourself. You could create a higher order component that adds state management capabilities to any other React component. This would allow you to keep your code clean and organized while still taking advantage of the built-in state management features of React.
Don’t miss out on our latest blog post on React Native Code Challenges. Cheers!
