React Hooks and HOCs Fundamentals

React Hooks

• Essential for React development.
• useState: Manages component state.
• useEffect: Handles side effects.
  • Dependency array: Crucial for controlling when effects run.
    • Empty array: Effect runs only once on mount.
    • Non-empty array: Effect runs when array values change.
• Other Important Hooks:
  • useContext: Accesses data from React Context.
  • useReducer: Manages complex state updates.
  • useMemo: Memoizes expensive calculations.
  • useCallback: Memoizes callback functions for performance.
  • useRef: Accesses DOM elements directly.

Higher Order Components (HOCs)

• Functions that take a component and return an enhanced one.
• Purpose: Code reuse, adding functionality without original component changes.
• Use cases: Adding common features or logic to multiple components.
• Implementation: Wraps the component's render function.
• Importance: Impress interviewers by using HOCs in machine coding rounds.

Component Lifecycle Methods

• Focus on Class Components (though less common).
• Three Phases:
  • Mounting: Component added to the DOM.
  • Updating: Component receives prop or state changes.
  • Unmounting: Component removed from the DOM.
• Key Methods:
  • Mounting:
    • componentDidMount: Runs after mount.
    • componentWillMount: Rarely used.
  • Updating:
    • componentDidUpdate: Runs after update.
  • Unmounting:
    • componentWillUnmount: Runs before unmount.
• Order of Execution: Understand the order of method calls.

State Management

• Props and State: Crucial for data flow.
• Props Drilling: Passing data down hierarchies, potentially cumbersome.
• React Context: Shares data across components without prop drilling.
• Sibling Communication: Passing data between siblings.
• Redux: Popular state management library for large apps.
  • Use cases: Global state, complex data flow, predictably.
  • Redux Toolkit (RTK): Simplifies Redux.
  • Zustand: Simpler, newer state management library.
  • Understanding: Knowing how these libraries work is beneficial, even if not extensively used.

Custom Hooks

• Definition: Reusable functions containing hook logic.
• Advantages: Reusability, maintainability, readability, and testability.
• Examples: useLocalStorage.
• When to Use: For sharing complex logic across components.
• Code: Need to write custom hooks.

Advanced Topics

• Lazy Loading (Code Splitting): Performance technique.
  • Benefits: Faster initial load times.
  • Techniques: import() (dynamic import), Suspense, Code Splitting (by bundlers), Code chunking.
• Virtual DOM: Key concept.
  • Benefits: Efficient DOM updates with in-memory representation.
  • Components: Reconciliation Algorithm, React Fiber, Diffing Algorithm.
• SSR (Server-Side Rendering) & CSR (Client-Side Rendering): Performance considerations.
  • SSR: Server renders application initially, improves SEO and initial load.
  • CSR: Browser renders application, often better for complex interactions.
  • Comparison: Understanding pros and cons of each approach.
  • SEO: Both impact SEO, especially for single-page applications.
• Testing: Ensures code quality.
  • Benefits: Early bug detection, maintainable code, confidence.
  • Types: Unit, Integration, and End-to-End tests.

Asynchronous Tasks

• Definition: Non-immediate actions (API calls, timers, user events).
• Key Concepts:
  • Promises: Represent asynchronous results.
    • Callbacks: Functions triggered on asynchronous completion.
  • useEffect: Manage asynchronous operations.
  • API Calls (fetch, Axios): Fetch data from APIs.
  • Timers (setTimeout, setInterval): Delay or repeat code.
  • Events: Handle user interactions (clicks, scrolls).

Reusability, Modularity, Testability, Readability

• Coding Practices: Important for robust and maintainable applications.
  • Modularity: Divide code into reusable components.
  • Reusability: Design components for use in other parts.
  • Testability: Ensure easy testing.
  • Readability: Clear and understandable code.
  • Component Size: Maintain component files under 150-200 lines.

Performance Optimization

• Essential for senior engineers.
• Key Areas:
  • Lazy Loading: Load code and assets when needed.
    • Benefits: Faster initial load, better experience.
  • Asset Optimization: Reduce asset sizes (images, JavaScript, CSS).
    • Tools: Optimizers, bundlers, minifiers.
    • Bundlers: Help optimize code using tools like Webpack.
  • Server Optimization: Enhance server performance with caching, CDNs, server-side rendering.
  • Code Optimization: Write efficient code, minimize DOM manipulations, and optimize rendering.
    • Shimmer UI: Indicator for loading.

Styling

• Techniques:
  • Inline Styles: Apply styles within JSX.
  • CSS: Separate CSS files.
  • SCSS/SASS: CSS pre-processors, add features like nesting.
  • CSS Frameworks: Tailwind CSS, Bootstrap, Material-UI, Ant Design, Stylex (CSS-in-JS).
• Pros and Cons: Choose styling method based on project needs.
• Importance: Design round prep, understand styling decisions.

Accessibility

• Designing inclusive applications.
• Importance: Welcoming experience for all users.
• Brownie Points: Demonstrating accessibility knowledge.
• Best Practices: Follow WCAG (web accessibility guidelines).
• Tools: Use accessibility testing tools.

Additional Key Concepts

• RBAC (Role-Based Access Control): Control access based on roles.
• Routing Library: React Router, handles navigation.
  • Protected Routes: Restrict routes based on authentication
  • Dynamic Routing: Responsive routes.
  • Query Params: URL data.
• Security: Protect application against vulnerabilities.
  • Best Practices: Learn about and avoid common vulnerabilities.

Overall Notes

• Study Depth: Go beyond surface-level understanding.
• Industry Standards: Master industry coding practices.
• Practice: Improve interview confidence through practice.
• Confidence: Project confidence in your knowledge.
• Additional Resources: Utilize various resources to deepen understanding.
• Reward: Celebrate learning through practice challenges and online communities.