So welcome back guys, in the last post we saw what React Context API is, why we use it, how we use it (basic stuff), when to use it etc. etc. But what if someone told you that React Context API is also not a good way to manipulate global state.

Well, React Context API is a very good way of creating global state, and managing state variables efficiently but for small or let’s say medium level projects. These can ye your own side-projects or some college project and so so. …


Before diving deep into React Context, first let’s see why do we need React Context, what is React Context, and many other questions that striking your brain.

Suppose we have an E-commerce app, as shown below.


In the last post we talked about Lifecycle methods, today we’ll see what HOCs or Higher order Components are, and where are they used.

So basically HOCs incorporate the idea of don’t-repeat-yourself (DRY) rule, and it is one of the most important rule in Software Development. HOCs are advanced technique of reusing logic in React Components.

HOCs are based on Higher Order Functions, a key concept in JavaScript. Let’s first have a look at Higher Order Functions and then it will be more easy to understand what Higher Order Components are.

Higher Order Functions

These are basically functions which takes a function as…


Today I’ll be talking about another important React.js concept which is Lifecycle methods in class based components and how these can be implemented in functional based components.

Before that let’s see a basic difference between class and function based components.

Function vs class based components

A functional component is a plain JavaScript function, which accepts some props as argument and returns a React Element, whereas class components needs to be extend from React and renders a function which returns a react element. React Hooks and lifecycle can only be implemented in class based components, but that was before the release of React 16.8.

Now what…


Reacts Hooks are basically used to maintain state of in a React App. React Hooks are introduced in latest version of React which is 16.8, before that state existed only in Class components. When React 16.8 was released, we were able to manage state in functional components as well. Hooks are introduced for functional components only and so cannot be used inside of class components. Today we’ll be talking about two main React Hooks, useState and useEffect.

useState:

useState Hook is a function which stores initial value of state in a functional component. It has two arguments, first is a variable…

Satyam Bhardwaj

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store