Separation of Concerns in React.

A Quick walkthrough of the separation of concerns in react.

We are gonna go through a quick separations of concerns.

What are the separations of concerns?

It is when your component are only responsible for one of two things. Having state, and containing all the functionality or display html or jsx. Which are called smart(container) components and dummy(presentational) components.

What are container components?

It is a component that is responsible for all the functionality. It is a class component, it holds state, and has access to life cycle methods. Also it is usually rendering a presentational component.

What are presentational components?

It is a component responsible for rendering jsx, and have all methods, and values from props.( Make sure to use PropTypes to know what type of props your gonna get also.)

Why are they two different type of components?

Because we do not want to type anything into our presentation because that is responsible for render our component. This makes the concerns separated therefore if we need to add functionality we will go to the container component, and if we need to style or change the structure of how our component is structured we will just go to the presentational component that is responsible for rendering our html or jsx.

We will create a simple example of a Form that is responsible for registering the user. So best practice would be to create two folders within your components folder which will be presentational, and container.

Presentational standing for presentational components, and container for container components.

First let’s get started on our RegisterPage Container Component, all our functions will be arrow functions. Since arrow functions don’t refer to the parent’s context, therefore taking the need out of binding those functions to that component in which it is defined.

So in our class component, since we don’t have a backend setup, but we can do a call to it using our register, but it this case we just doing a alert, and clearing the input fields. While all of our handleChanges are arrow function we just used es6 syntax to define them. Then we are just returning our presentational component with the props we want, and in this case since we using all our state in that component, we will just pass all our state.

Now let’s go to our presentational component where we will have our prop-types setup where we are just making we are getting the right props, and if we are not we will return a warning. Then we just simply using the functions, and having all of our input field values set to the right props.

Great. This a basic example of how we separate concerns. Now if we want to just style we can go to the presentational component, but if we want to add functionality we just to our container component. Therefore separating concerns at a basic level.

Optional: Use recompose a utility hoc for react.

We are gonna go to another to have it so we don’t even have to change props in our presentational component. Going to another level of separating concerns.

What is recompose?

It is a HOC that is responsible for adding props, or defining the props passed in from container components. You can even make so you don’t even NEED class components!!!! By having state in a hoc itself, but for this example we are still gonna keep our stucture, and use withHandlers to define all our methods for our form. Here is a article regarding the separations of concerns.

Lets create a FormDecorator.js file which will be our decorator HOC that will give props, but something changes in the future we can just alter the HOC.

Now what we did is that we just set each handle and destructure the object props passed in the we need.(The props) Then it is gonna return a closure with our event, and we will just get the event.target.value from it and pass to our handleChange function.

Now for our register we do not need a event, and set it to onClick, and also no need for a callback since we are returning a closure when defining our props. So it will just return a function, and we will get the register props. In the future when we are dealing with connect from react-redux or withRouter we can just pass in those with our decorator. Make one big HOC using compose method from recompose.

Here is one more articles explaining seperation of concerns. And I hoped your mind blown, because I learned this my mind was BLOWN!!. It is another level of writing efficient code.

Here is my Github for reference, and Happy Coding!!