Strict Typecheck To enforce stricter type checking in TypeScript and ensure that developers specify types consistently, you can enable strict type checking by configuring your tsconfig.json file. By setting the strict flag to true, you enable all of TypeScript’s strict type-checking options at once: { “compilerOptions”: { “strict”: true } } Alternatively, if you prefer…
Author: Rohit Naik Kundaikar
Vite Micro Frontend
A micro frontend is a development approach that breaks down a web application’s front end into smaller, self-contained modules. These modules can be developed, tested, and deployed independently, making micro frontends particularly useful for large and complex web applications that demand flexibility and faster iterations. Create To implement a micro frontend architecture, start by dividing…
React Best Practice: Part 2
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….
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…
JS Arrays Cheatsheet
push(value) Simply adds new value at the end of the array. unshift(value) Like push unshift also adds elements to the array, but at the start of the array instead the end of array. pop() Removes the last element from the array. shift() It would simply remove the first element in the array, unlike pop() which…
Function Declaration, Function Expressions, Function Hoisting, Self Executing Function, Higher-Order Function, Callback Function, or First Class Function and Arrow Functions.
Function Declaration or Statement Function Expressions Function Hoisting A function created using Function Declaration or Statement can be called even before its declaration as shown in below example. However functions created using Function Expression can only be called after it has been declared. This is the key difference between a Function Declaration and Function Expression….
Spread Operator Usecases {…object} […array]
Spread Operator makes life much easier for JS developers when it comes to doing basic operations on Arrays and Objects. Below are some examples of Spread Operator. Spread Operator Syntax : Array : […array] Object : {…object} Deep Copying Objects and Arrays Concatenating Objects and Arrays Adding new values to Objects and Arrays Spreading Arrays