Thread by @MakadiaHarsh

Majority of developers are using ReactJS for web development.

It's the best JavaScript library to learn that will bring you more money. 💸

Here are 11 concepts you should know to stand out from the rest.

THREAD 🧵 ↓

1. Lifecycle methods with React Hooks

Why use the class component when you have hooks?

Even if the Hooks-based implementation is difficult to understand at the beginning but it’s worth switching to Hooks at the end.

To master React hooks you need to understand the following concept 🎯

• useState
• useEffect
• useRef
• useReducer
• useCallback
• useContext
• useLayoutEffect
• useImperativeHandle
• useDebugValue

2. Destructuring

To write cleaner code, you can destructure the props object into separate variables using ES6 object destructuring.

It is one of the most underrated features.

3. Memorize

Optimizing React app performance with the memo is a life hack.

It is very much important to know about the different types of methods you can use for optimization.

• React.memo
• React.useMemo
• React.useCallback
• React.PureComponent

4. Default Props and PropTypes

As your app grows, you can catch a lot of bugs with type-checking.

It will help you prevent obvious bugs right out of the box

5. useState Lazy Initialization With Function

There are times when we need to set the initial value of the state from some variable or from a function that returns a value.

This is the ultimate performance booster.

6. Retain Previous Value

While updating props or state, you can retain their previous values just by using React.useRef

7. Higher-Order Components

A higher-order component is a function that takes a component and returns a new component.

React’s Higher Order Component is a pattern that stems from React’s nature that privileges composition over inheritance.

8. Making Use of Custom Hooks

With hooks, we don’t have some facility that can help us get the callback as in the case of setState.

Make use of custom hooks to reduce the code

For more easy-to-understand hook recipes

usehooks.com

9. Monitor Unnecessary Renders in Your Applications

There are different ways to evaluate unnecessary renders in minutes in your React application.

Use this package to do a post-mortem of the app.

github.com/welldone-softw…

10. React DevTools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library.

It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

Mastering this is a life hack.

11. ...Spread operator

The three dots syntax (…) is part of ES6 and not React itself

Stop passing each prop in the Child component as an individual prop, you can pass everything a once with this hack.

Check out this thread for top libraries of React that you could consider trying for your next project.

Thanks for stopping by and reading about this.

1. Retweet to inspire others

2. Like if you loved this

3. Follow @MakadiaHarsh for more such tips and tricks

Cheer! 🥂

Back to top! 🔝