What is React
React is a popular JavaScript library used for building user interfaces (UIs), specifically for single-page applications.
JSX: JSX is a syntax extension that lets us write HTML-like code inside JavaScript. Browsers don’t understand JSX directly — React converts JSX into React.createElement()
Components: A component is a reusable piece of UI.
Props: Props are used to pass data from parent to child components. They are read-only — a child cannot modify props.
State: State represents data that can change over time and affects UI.
Event Handling: techniques to perform user interaction like form submit.
Lists & Keys: React handles events using camelCase syntax.
Performance Optimization react level: useCallback, useMemo, React.memo - to avoid re renders
Performance Optimization react level: useCallback, useMemo,lazy loading, debouncing and throttling, React.memo - to avoid re renders
Hooks
useState: It allows a component to store data, update it, and re-render the UI whenever that state changes.
useEffect: It allows a component to run side effects like API calls or subscriptions when the component renders or updates.
useContext: It allows a component to consume shared data from context without passing props through every level.
useRef: It allows a component to store mutable values or access DOM elements without triggering re-renders.
useReducer: When multiple state values changes and state value is depending on previous state values. Alternate if useState.
useMemo: It allows a component to optimize performance by memorizing expensive calculations between renders.
useCallback: It allows a component to memoize functions so they are not recreated on every render unnecessarily.
useLayoutEffect: It allows a component to run side effects synchronously after DOM updates but before the browser paints.
useDebugValue: It allows a component to display custom debug information for custom hooks in React DevTools.
useTransition: Marks some state updates as non-urgent (low priority) so React keeps the UI responsive.
useDeferredValue: Returns a delayed version of a value. React updates it later if rendering is expensive.
Q&A
Saas based Product:A SaaS-based project (Software as a Service) is a software development model where the application is hosted on a central cloud server and delivered to users over the internet. Instead of a customer buying a "lifetime license" and installing it on their own computer, they "rent" the software via a subscription (monthly or annually) and access it through a web browser or mobile app.
useEffect vs useLayoutEffect: It runs after the component is rendered on the screen. Not blocking the UI.
It runs after the DOM is updated but before the screen is rendered, so it blocks the UI until it finishes.
Advantages: Component-Based Architecture, Virtual DOM, Large Ecosystem & Community and Flexibility like it is UI library meanwhile Vue and Angular is full-fledge framework.
Disadvantages: routing, state, folder structure, different structure across diff teams, frequently changes in ecosystem like CRA to vite, Redux to RTK or zustad.
Different: External libraries for state, routes, react use JSX
Difference between redux and RTK: Redux is a state management library for JavaScript apps. and it is manual. Redux Toolkit is the official, recommended way to write Redux today. it is automatic.
Babel and Webpack: Babel makes new JavaScript run in old browsers.
Webpack Its main job is to take your entire application (many JavaScript files + CSS + images + fonts + JSON + ...) and bundle them into one or more optimized files that the browser can efficiently load.
Top comments (0)