Function Recreation: Utilizing the useCallback hook is crucial as it allows you to memorize a function. Whenever a component is re-rendered, all functions within the component are unnecessarily recreated, adversely impacting app performance. To mitigate this, a simple solution is to enclose the function with the useCallback hook, preventing recreation when no dependencies have changed….
Category: ReactJS
React Best Practices: Part 1
Custom Hooks: Custom hooks are a powerful mechanism in React to encapsulate and reuse logic. By creating separate functions as custom hooks, you can modularize your code, making it more readable and maintainable. These hooks can encapsulate complex logic or API calls, promoting code organization and reusability. Example: https://github.com/thatsrohitnaik/my-react-boiler-code/blob/main/src/hook/useApp.ts Cache with SWR: The SWR (Stale…
Redux Toolkit
First thoughts, not as simple as MobX, but far, far better than using Redux. Yes, Redux Toolkit is much simpler to use than Redux, it overcomes the common issues of using Redux such as. Configuring the redux store is much complicated and often leads to errors. You need to use a lot of add-on libraries…
React MobX Store
MobX is the best and most easy way of implementing a store in react project, it is so simple that you will never use redux in your life again. Unless you are told to do so at gunpoint. There are two ways of implementing MobX one using decorators and the other without it. However MobX…
React Context
Context provides a way to pass data from the root component to any child components without having to pass it manually as a relay from component to component. Thus solving the prop drilling issue, also context comes in handy while passing a store across the application. For example, If you are using a third-party store…
How to add MobX state management in React project
In this article you will get to know how your life as React developer could be easier if you simply switch to MobX from Redux. With the introduction of React-Context and increasing use of MobX in react application, I really hope that one day Redux bubble bursts. All of that being said, let’s begin with…
How To Setup React Project With Babel and Webpack
What is Webpack ? Webpack is a tool that bundles your modern day JavaScript application with multiple file imports like in case of React project into a single or in some cases multiple JS bundle files. for example Let’s start with the setup, first you will have to create node project. Open your package.json file…