Now before diving into the concepts of functional programming in React, let’s understand what is functional programming? The functional programming is a concept of creating pure functions for software logic. It avoids concepts of mutable data and a shared state as used in Object-oriented programming. The functional programming is based more on expressions and declarations rather the statements. The functional programming depends only on the arguments passed to the function.
Now let’s move to how functional programming is implemented in React
But React hides a functional side also so let’s check how
Displaying an output
The main thing React component does is implement a render () method without which the component is not a React component. The render() method returns a React element so in other words, you could think it as React is requiring the component to have an output. So in turn makes you think of a component more in terms of a function rather than as an object. A component is something that returns an output on the basis of an input.
Now how can you implement React component as a function
Now this is a simple way to implement component
You can also pass arguments to it
Now another way to think of a React component in a functional way is because of the props. You know props are immutable, you can read them, but you cannot change them. Making props immutable avoid many side effects since they play as an input argument to the component. The functional programming immensely emphasizes on the concept that the input argument should not be changed by a function. As this is the basic concept behind creating pure functions.
In React, the data flow happens from a higher up component towards the lower component and not vice versa. In other words, the React promotes the unidirectional data flow. So this concept doesn’t require a React JS Development Company to think React in terms of objects. This more emphasizes to think React in terms of a function.
The following code will help you understand the concept as described by the React Native Development Company.
At first it doesn’t seem a unidirectional flow
But now again consider the following version of the same code as depicted by React JS development Company
Now it should be clear that the component hierarchy is nothing but the composition of the function App() and Hello() and the unidirectional data flow.