React.
js Important Topics:
This sheet provides a quick reference to React's key concepts, hooks, and optimizations. Let
me know if you need any refinements!
● Core Concepts
○ JSX: JavaScript XML, a syntax extension that allows writing HTML inside
JavaScript.
○ Components: Reusable UI elements; can be functional or class-based.
○ Props: Data passed from parent to child components.
○ State: Local component data that determines rendering.
○ Keys: Unique identifiers for list elements to optimize rendering.
○ Virtual DOM: A lightweight copy of the actual DOM used for efficient updates.
○ Reconciliation: React’s process of updating the virtual DOM and efficiently
updating the real DOM.
● Controlled vs Uncontrolled Components
○ Controlled Components: Form inputs where React controls the state.
○ Uncontrolled Components: Form inputs where the DOM controls the state
using refs.
● Props vs State
○ Props: Passed from parent to child, immutable inside the child component.
○ State: Managed within the component, can be updated using useState or
useReducer.
○ Key Difference: Props make components reusable, while state makes them
dynamic.
● Class vs Functional Components
Class Components:
● Use ES6 classes and require this.state and this.setState.
● Have lifecycle methods like componentDidMount and componentDidUpdate.
Functional Components:
● Use hooks like useState and useEffect for state and lifecycle methods.
● Simpler and more concise, leading to better readability and maintainability.
● React State & Hooks
○ useState: Hook for managing component state.
○ Batching State Updates: React batches multiple state updates within event
handlers to improve performance.
○ useEffect: Hook for handling side effects (e.g., API calls, event listeners).
○ useContext: Allows sharing state across components without prop drilling.
○ useReducer: Alternative to useState, useful for complex state logic.
○ useMemo: Optimizes performance by memoizing values.
○ useCallback: Memoizes functions to prevent unnecessary re-renders.
○ Custom Hooks: User-defined hooks to encapsulate reusable logic across
components.
● React Portals
○ Portals: Allow rendering children into a different part of the DOM outside the
component hierarchy, typically used for modals and tooltips.
○ ReactDOM.createPortal(<ChildComponent />, document.getElementById('portal-
root'));
● Need for Cleanup Function in useEffect
○ Cleanup functions are used to prevent memory leaks and unwanted behaviors in
components.
○ Example: Removing event listeners when a component
unmounts.
● Component Communication
○ Parent to Child: Props
○ Child to Parent: Callback functions
○ Sibling Communication: Context API, state management libraries
● React Performance Optimizations
○ React.memo: Prevents re-renders if props remain unchanged.
○ Lazy Loading: Loads components only when needed.
○ Code Splitting: Splits the codebase into smaller bundles for better performance.
● Routing in React
○ React Router: Enables client-side navigation without page reloads.
○ useParams: Extracts URL parameters.
○ useNavigate: Programmatic navigation.
● State Management
○ Redux: Centralized state management for large applications.
○ Context API: Lighter alternative to Redux for managing global state.
● Additional Concepts
○ Higher-Order Components (HOC): Functions that wrap components to add
functionality.
○ Error Boundaries: Catch JavaScript errors in components.
○ Fragments: Avoids unnecessary parent elements in the DOM.
● Limitations
○ JSX
■ Requires a build step (e.g., Babel) to convert JSX into JavaScript.
■ Cannot use JavaScript expressions directly inside JSX (must be wrapped
in {}).
■ Attributes like class must be written as className due to JavaScript
restrictions
.
○ React
■ React is only a UI library; additional tools (like Redux, React Router) are
needed for full app development.
■ SEO challenges due to client-side rendering (can be mitigated with SSR
using Next.js).
■ Frequent updates require developers to keep up with changes.
○ Context API
■ Not optimized for frequent state updates, leading to unnecessary re-
renders.
■ Becomes complex when managing large-scale applications compared to
Redux.
