A quick React guide to effectively manage state, logic and UI with Context API & Separation of concerns

If you're someone who has just started to explore React as a framework and were wondering how to effectively manage state or UI? Then you are at the right place!

Context API plays a vital role in handling state management. It is actually a relatively new feature that was added in the version 16.3 of React.

The go-to alternative to Context API before its introduction was "prop drilling". Which basically meant that If a prop had to be passed around between react components i.e.,moving props from grandparent to child to parent, and so on. The only way for it was to pass through each component before being accessible to the intended component.

For Ex: A prop being passed through to a child from a parent

No big deal, right! Now lets see how complex the process gets when there are multiple children.

In the second case, the prop had to traverse through two child components before being accessible to the intended child.

Such cases result in bloating the component and hence in return become difficult to edit/modify or even read through the code, which is not desired in an environment where multiple developers contribute in a project.

So what actually is Context API? How does it work? The React Context API is a way for a React app to effectively produce global variables that can be passed around. Context is also touted as an easier, lighter approach to state management using Redux which is also a proposed solution to counter the issues related to prop drilling or bloated components.

The above image displays how the Consumer has access to the Provider without having to traverse through multiple parents or children. This eliminates the use of prop drilling and redux at this juncture.

Separation of concerns is a design principle for separating a program into distinct sections. A concern basically is something that our code is responsible for, Each section is a set of information that affects/influences the code.

Consider an example of a any app that is primarily concerned with two things-

• Fetching Data Logic
• Displaying Data UI

The proposed solution is-

• Container Component for Logic (responsible for what the app component does)
• Presentation Component for user interface (what the app component looks like)

//example for a weather widget

//Container Component for Logic
const weatherWidgetContainer = () =>{
    const [weather, setWeather] = useState(null) //state management
    const getWeather = async()=>{
            const response = await getWeatherService() //api call from service provider
            setWeather(response.data)
            return response.data
    }
     return(
        //Presentation component for UI
        <WeatherWidget weather={weather}/>
)
}

With these simple, practical, and tangible patterns hopefully your current (and next) React application becomes more composable, easier to reason about, and just overall more pleasurable to work with!