Hello everyone! How you all are doing? 😀

I started learning React back in 2017 when I was starting my web development journey and It was not easy! 🥲 To date, it's been 3 years, I'm learning and developing web applications with React.

In this article, I have shared all the pieces that I think are important for you if you are willing to learn React or improve your current knowledge.

NOTE 1: I'm assuming you have basic knowledge of React.

NOTE 2: All opinions are my own! 🙈

Let's get started 🚀

React API, You should know! 😇

• Rendering Process and Updates
• Component Design (Stateless vs Stateful)
• State and Props
• Hooks
• Life Cycle
• State Management using Context
• Lazy Loading and Code Splitting
• Profiling and Devtools

✨ React Component Patterns (Advance) 🤯

• Container pattern
• Render Props
• Higher-Order Components

Let's take a look at the mentioned points one by one.

✨ Rendering Process and Updates

It's really important to understand how React renders your code in the browser. How the rendering process works in React. You don't have to look at how the code works but the overall concept and lifecycle. From your JSX code to a plain HTML file with some bundled JS links inside it.

Here are some takeaways:

1. Learn about Virtual DOM.
2. Learn how React uses VirtualDOM.
3. Learn how Updates are rendered with help of VirtualDOM.

👉🏻 A must-read article for you to master the rendering process and updates: React Virtual DOM vs Real DOM

✨ Component Design Ft. Stateful Vs Stateless

React has two types of components.

1. Functional components
2. Class components

Before hooks, we used to follow a pattern of smart and dumb components. After hooks, the dumb components can also be converted to smart! 😉 You should always know when you have to create a class component and when a functional. Both are fine and are part of React. You should learn both approaches very well.

Also, It's really important for you to understand the difference between Class and Functional components. A lot of interviewers ask this question in interviews as well. So be prepared for it.

✨ State vs Props

Learn the differences between state and props. What happens when the state or props are changed. Learn about how to make components reusable with the effective use of props. Also, do study how can we share data across components with efficient use of props.

In short, master both concepts. 😉

✨ Life Cycle Methods

Life cycle methods are an essential part of React. They were added to perform operations on certain stages of rendering, update, and mount. You can do all sorts of API calls, DOM manipulations, and update handlings with these methods.

Learn the usage of every lifecycle method, and try to practice it. Lifecycle methods are also helpful in understanding how React works and update the stuff. You gain control over the API. Also, some of the methods like shouldComponentUpdate can help you in performance boost as well!

👉🏻 You can Learn all the lifecycle methods from here: React LifeCycle methods, A deep dive

✨ Hooks, The loved part of React!

Hooks was first released in October of 2018. React hook APIs provide an alternative to writing class-based components and offer an alternative way for state management and lifecycle methods.

Before hooks, we were not able to manage the state in our functional components. If we wanted to use state, we always had to create class-based components. Moreover, we were also unable to use lifecycle methods in functional components.

Hooks enabled us to create/update state and use lifecycle methods within our functional components.

Nowadays, the community always prefers to write new React applications using hooks because functions are always lighter and much more modular.

Primary hooks you have to master at any cost are:

• useState
• useEffect
• useRef
• useContext - for using context API.

Additional hooks that are really useful and good to know:

• useMemo
• useCallback
• useReducer

When talking about hooks, here are the concepts that you must know:

1. Learn how to use React Hooks.
2. Rules of Hooks.
3. How to Create custom hooks.

You can learn these concepts from the documentation as well as thousands of resources are available on the internet to learn and master hooks.

✨ State Management using Context

State management is one of the most discussed topics in React. We have tons of tons of options nowadays for managing the state in react applications. Some of the most popular ones are:

• Redux - A Predictable State Container for JS Apps
• MobX - Simple, scalable state management
• Recoil - A state management library for React
• Zustand - Bear necessities for state management in React

If you are struggling with choosing your next state management tool, I would recommend reading this article:

👉🏻 The Best React State Management Tools for Enterprise Applications

If we talk about React, we have a built-in state management solution i.e Context API.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

If you are not convinced to use this feature, I still recommend that you should at least learn it. There are going to be a lot of points where you will be needing a small mechanism for managing a small amount of state that is to be shared with many components. Context is really good in that!

Here are the concepts that you must know:

1. When to use Context API of React.
2. How to create a context using createContext.
3. Patterns to manage Context API in an efficient way.
   • Reducer Pattern
   • Hooks

✨ Lazy Loading and Code Splitting

Lazy loading and code splitting, both are techniques use to boost the performance of your React app by reducing the amount of javascript loaded. Code splitting is related to your bundle loading. Instead of loading the complete bundle, only required bundle files are loaded. Lazy loading is a technique used in Code Splitting. Lazy loading helps you to load your resources and components when you need them.

These techniques are often used in large-scale web applications. If you want to ace the scalability with React, you can master both of these techniques and scale your React application.

You can learn both of these concepts from:

• The official documentation of Lazy Loading and Code Splitting in React
• Lazy Loading and Preloading Components In React

✨ Profiling And Devtools

Devtools helps you to debug your code very fast. You can inspect the components just like normal dev tools does. You can check the props, state, context, and a lot of other pieces of information about a component.

You can install devtools extension from here: React Devtools

Profiler is another useful technique that is used to measure the performance and rendering of your react apps. The Profiler measures how often a React application renders and what the “cost” of rendering is. The primary purpose of using Profiler is to find out the points which can be optimized for better performance.

You can read it more about here: Official React Profiler Docs

React Devtool has an amazing profiler that can record all the re-renders of your components with amazing visuals. You can learn it more here: React Devtools Profiler

I would recommend you to go with the Devtools option!

---

Let's take a look at some of the advanced topics which can really help you a lot in your development and interviews.

React Component Patterns - Advance 🤯

Components are the building blocks of React, and the Patterns are the ways to solve a specific problem. React Patterns are the ways to solve problems in React world.

In React, we already have two ways to create components i.e classes and functions. But there are some special types of components that help us to enhance the functionality of a component.

👉🏻 Container Pattern

A container component performs data fetching and then renders its corresponding sub-component. That’s it.

If you have a component named Posts and you are fetching all the posts in this component. When the posts are fetched, you are rendering them using the PostCard component. This completely follows the pattern of the Container Component.

Fetching can also be performed in Redux Actions or any other async store. The point is that you will always trigger the fetching from a Container component and render the state in corresponding child components

You can learn this pattern from here: Presentation and Container Pattern in React

Also, you can implement this pattern using Hooks as well!

You can read this guide for Implementing Container Patter using React Hooks

👉🏻 Higher-Order Components

A higher-order component is a function that takes a component and returns a new component. It gives extra features to a component or enhances the existing functionality of a component.

HOC's are everywhere. From router to redux, it's one of the most highly used patterns in React. You should at least know why it was created and what problems it can solve.

We all have used the magical connect function that takes mapStateToProps and mapDispatchToProps functions and connects the component to the redux store. connect is a higher-order component. Just like that, we have withRouter, withStyles, and tons of other HOCs.

You can read this post for understanding this pattern: Higher Order Components in React

👉🏻 Render Props

Render prop is another useful pattern used by many libraries to share data and functionality across components.

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.

There are two ways to use this feature, one is the render prop and the second one is a render callback.

✅ Using a render Prop

A render prop is a functional prop that a component uses to know what to render.

In DataProvider component, you can use the render and pass any data after any sort of calculation.

✅ Using Render Callback

In render callback, a callback is passed as a child to the component.

Now, inside the DataProvider component, we can call this.props.children and pass the data to the function and pass the data.

This pattern is an alternative to higher-order-component and is widely used in libraries like React Appollo and others.

You can learn this pattern from here: React Render Props Explained

---

✨ Roadmap To Practice

The only way to learn React effectively is to practice it.

• Pick a website like Github, Twitter, Facebook, or any other website and try to create small components like a search bar, buttons, tables, and cards.

• Make them completely reusable. This will help you understand the Component-Based Architecture better and share data among many different components. Try to implement the Patterns which you have learned.

• Integrate server APIs. You can use Firebase, SupaBase, or any other server API. Practice the data fetching strategies and try to manage the state on your own.

• When you will be able to identify the problems and challenges in managing the state, then go for state management tools. Redux, MobX, or Context. Take the technical decisions. Make and Break as much as you can to properly understand the pros and cons of state management tools.

---

✨ Conclusion:

Thousands of new tools and libraries are coming and the echo system of React is growing rapidly. The API of React has also changed with time and you cannot master every API in react. Neither you can remember it. So my suggestion for you is to master the building blocks and most used features of React.

If you know the fundamental API, component-based architecture, and effective use of state management solutions. You are good to go! ✌👉🏻✅

If you loved this article, make sure to like it and share it with other engineers!

Thank you! ✨

Follow me 👉 Github Twitter LinkedIn Youtube