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 🧵 ↓
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.
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
• 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.
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
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
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.
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
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.
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
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…
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.
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.
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.
https://twitter.com/MakadiaHarsh/status/1437416399346020354
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! 🥂
1. Retweet to inspire others
2. Like if you loved this
3. Follow @MakadiaHarsh for more such tips and tricks
Cheer! 🥂
• • •
Missing some Tweet in this thread? You can try to
force a refresh
