React Index -

• Error boundries
• React portals (render a component's children to a different part of the DOM hierarchy; used for modals and tooltips.);
• when you hve to update state based on rpevious state always use callback

// BADsetCount(count+1)// GOODsetCount(count => count+1);

• ...restProps

function MyComponent({ importantProp, ...restProps }) {  return (    <div>      <ChildComponent {...restProps} />    </div>  );}

• forwardref (https://react.dev/reference/react/forwardRef)
• Higher Order components (HOC) and Higher order functions
• React.lazy, dynamic import, Suspense, fallback, Route based as well
• Design Patterns: Container-Presentational, Compound Components (https://codesandbox.io/s/provider-pattern-2-ck29r?from-embed=&file=/src/FlyOut.js), and Controlled vs. Uncontrolled Components.
• Enabling git hooks (pre-commit and pre-push)
• Adding eslint config for clean code
• Render props, props.children and higher order function
• props drilling problem and createContext, useContext hook
• Hooks - useState, useEffect, useMemo, useContext, useRef, useReducer, useCallback
• Custom Hooks: to abstract and share component logic across your application.
• useEffect hook and lifecycle
• redux, react-redux lib , mapStateToProps, mapDispatchToProps, connect, dispatch
• Performance Optimization: Techniques like memoization, shouldComponentUpdate, the useMemo and useCallback hooks
• Store, Redux, CreateStore, rootReducer, combineReducer, reducer, action , action creators
• render phase, commit phase
• when does a component re-render?
• differnece between instance variables in class components and variables declared in functional componets; usecase of useRef in this Case
• functional and class components
• state and props (mutablitity and immutability)
• state, setState, asynchronous behaviour
• imp. setCount((prevCount) => prevCount + 1); vs setCount(count + 1); // first one to use when implementing stopwatch
• Using props.children to use composition (don't use inheritance)
• Use {MyRefactoredComponent()} instead of
  when refactoring inside the component but use
  when refactored outside.
• Communication bewteen react components -
  • pass props from parent to child
  • State Management Libraries
  • Context API
  • pass Callback Functions as props from parent to child (for communication from child to parent)
  • Event Bus or Pub/Sub (using a third-party library or custom code)
• ways to write css in react (global css file / module css(that creates unique class name) / css in js(styled components)); src- https://www.freecodecamp.org/news/how-to-style-react-apps-with-css/ inline styles plain css sass css modules css in js
• Pure component and pure functions
• Automatic batching of state and state snapshot
• use plop.js for creatinhg components just like angunar command line
• React profiling for performance ccheck with react dev tools

---

• Use of webpack, npm and Babel
• React and ReactDOM CDN link
• React Router;
• JSX, Is it mandatory in react?, Prevent injection attacks, relation to React.createElement()
• unidirectional data flow
• using .map() to render list of elements or compoennts
• Lifting state to closest common ancestor
• and React.Fragment

---

• Virtual DOM, Reconciliation, Diffing Algorithm, Significance of using key when render list
• achieving composition, passing components as props
• SPA
• synthetic events
• !==
• useRef(used in function comp), React.forwardRef, createRef(used in class comp)

---

Tools

• React dev tools
• react query
• state management lib : redux, Mobx, Zustan, recoil

Testing

• Libraries available: JEST : built-in test runners and assertion libraries, mocking and spying on functions React testing library: @testing-library/react, writing tests that resemble how a user would interact with your application Cypress: end-to-end testing framework , write tests that simulate user interactions with your app in a real browser, testing user flows and integration testing. Mocha and Chai