Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
REACT
| Term | Definition |
|---|---|
| * What is React? Why React? | |
| * SPA vs MPA | |
| * Unidirectional data flow | |
| * Component-based architecture | |
| * functional and class components | |
| * JSX | |
| * not mandatory | |
| * transpiles to `React.createElement` | |
| * injection protection | |
| * React vs ReactDOM | |
| * Virtual DOM | |
| * Reconciliation | |
| * Diffing algorithm | |
| * Importance of `key` | |
| * Synthetic events | |
| * Fragments `<></>` / `React.Fragment` | |
| * Composition over inheritance | |
| * `{MyFunction()}` vs `<MyFunction />` | |
| * CDN usage vs build tools | |
| * Webpack, Babel, npm basics | |
| * Mount → Update → Unmount lifecycle | |
| * Render phase vs Commit phase | |
| * Use {MyRefactoredComponent()} instead of <MyRefactoredComponent/> when refactoring inside the component; but use <MyRefactoredComponent/> when refactored outside. | |
| * Pure component and pure functions | |
| * When does a component re-render? | |
| * state change | |
| * props change | |
| * parent render | |
| * context change | |
| * Why children re-render by default | |
| * StrictMode double rendering (dev only) | |
| * Batching (React 18 automatic batching) | |
| * State snapshot behavior | |
| * Cleanup functions | |
| * `useEffect` vs `useLayoutEffect` vs `useInsertionEffect` | |
| * Hydration | |
| * `createRoot` vs `hydrateRoot` | |
| * Props (immutable) | |
| * State (mutable via setter) | |
| * setState async behavior | |
| * Functional updates (callback form) | |
| * State immutability patterns | |
| * Lifting state to common ancestor | |
| * Colocation of state | |
| * Derived state pitfalls | |
| * Controlled vs uncontrolled components | |
| * Render props | |
| * props.children | |
| * HOC vs render props | |
| * Pure components | |
| * Pure functions | |
| * setInterval/setTimeout stale state issues | |
| * Functional setState inside timers | |
| * higher order function | |
| * setCount((prevCount) => prevCount + 1); vs setCount(count + 1); | |
| * using state inside setinterval or settimeout | |
| * useState | |
| * useEffect and lifecycle | |
| * useRef | |
| * useMemo | |
| * useCallback | |
| * useContext | |
| * useReducer | |
| * differnece between instance variables in class components and variables declared in functional componets; usecase of useRef in this Case | |
| * forwardRef | |
| * useImperativeHandle | |
| * Custom hooks | |
| * useRef as instance variable | |
| * useId | |
| * useDebugValue | |
| * useSyncExternalStore | |
| * useLayoutEffect use cases | |
| * stale closures (deep understanding + fixes using ref) | |
| * React.memo | |
| * useMemo | |
| * useCallback | |
| * Differences between them | |
| * When memoization is useless/harmful | |
| * Prevent unnecessary re-renders | |
| * Stable references | |
| * Inline functions myth | |
| * Keys causing re-mounts | |
| * Virtualized lists (react-window/react-virtualized) | |
| * Code splitting | |
| * Lazy loading | |
| * Suspense fallback | |
| * React Profiler (DevTools) | |
| * Avoid expensive calculations inside render | |
| * Large context causing re-renders | |
| * Concurrent rendering (non-blocking UI) | |
| - startTransition (mark low priority) | |
| - useTransition (same + loadingState) | |
| - useDeferredValue (delay value) | |
| * Automatic batching (fewer renders) | |
| * Suspense for data fetching (built-in loading UI) | |
| * Streaming SSR (faster server render) | |
| * Server Components (server-only logic, no js, only rendered html sent) vs SSR | |
| * selective hydration (faster interaction, enabled using Suspense) | |
| * Synthetic events | |
| * Event delegation | |
| * Stale closures in listeners | |
| * Cleanup listeners | |
| * Debouncing/throttling | |
| * Passive listeners | |
| * Prevent memory leaks | |
| (Include your stale state example here) | |
| * Controlled inputs | |
| * Uncontrolled inputs | |
| * useRef with forms | |
| * Form validation | |
| * Debouncing input | |
| * Preventing re-renders | |
| * Form libraries | |
| * React Hook Form (uses uncontrolled i.e refs internally, Useful for big forms, as it wont cause re-render much) | |
| * Formik (uses controlled inputs, useful for small forms) | |
| * Props drilling problem | |
| * createContext | |
| * useContext | |
| * Provider pattern | |
| * When context causes re-renders | |
| * Splitting contexts | |
| * memo with context | |
| * Context vs Redux tradeoffs | |
| * Passing functions via context | |
| * Store | |
| * Reducer | |
| * Action | |
| * Dispatch | |
| * combineReducers | |
| * applyMiddleware | |
| * connect | |
| * mapStateToProps | |
| * mapDispatchToProps | |
| * useSelector | |
| * useDispatch | |
| * createSlice | |
| * configureStore | |
| * extraReducers | |
| * Immer | |
| * RTK Query | |
| * Thunk | |
| * Saga (takeLatest, call, put, race) | |
| * Zustand | |
| * MobX | |
| * Recoil | |
| * fetch/axios | |
| * useEffect fetch pitfalls | |
| * server state vs client state | |
| * `React Query` (solves all below) vs SWR | |
| * race conditions | |
| * abort controllers | |
| * memory leaks | |
| * caching | |
| * pagination | |
| * optimistic updates | |
| * retry logic | |
| * background refetch | |
| * deduplication | |
| * React Router | |
| * Nested routes | |
| * Layout routes | |
| * Protected routes | |
| * Lazy loaded routes | |
| * Route-based code splitting | |
| * Container vs Presentational | |
| * Compound components | |
| * Provider pattern | |
| * Controlled vs uncontrolled components | |
| * HOC | |
| * Render props | |
| * Headless components | |
| * Passing components as props | |
| * Smart vs dumb components | |
| * Feature-based folder structure | |
| * Colocation strategy | |
| * Microfrontends (concept) | |
| * Design systems | |
| * pass props from parent to child | |
| * State Management Libraries | |
| * Context API | |
| * forwardRef + useImperativeHandle (Calling child's function from parent using exposing ref) | |
| * 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) | |
| * Using props.children to use composition (don't use inheritance) | |
| * Global CSS | |
| * CSS Modules | |
| * SCSS | |
| * Styled Components and Emotion (dynamic UI or theming) | |
| * JSS | |
| * CSS-in-JS tradeoffs | |
| * classNames library (for conditional styling) | |
| * Styling pitfalls with modules | |
| * nth-child issues | |
| * Theming | |
| * semantic HTML | |
| * aria attributes | |
| * keyboard navigation | |
| * focus management | |
| * screen readers | |
| * accessible modals/portals | |
| * Rendering outside DOM hierarchy | |
| * Modals | |
| * Tooltips | |
| * stacking context issues | |
| * focus trapping | |
| * Error boundaries | |
| * What they catch vs don’t catch | |
| * Fallback UI | |
| * Logging (Sentry) | |
| * Async error handling | |
| * CSR vs SSR vs SSG vs ISR | |
| * Hydration | |
| * SEO implications | |
| * Next.js basics | |
| * Streaming | |
| * Server vs client components | |
| * Jest | |
| * React Testing Library | |
| * Mocking | |
| * Spying | |
| * Mocha and chai | |
| * Snapshot testing | |
| * Integration testing | |
| * Cypress (E2E) | |
| * Testing user behavior vs implementation | |
| * typing props | |
| * typing children | |
| * generics | |
| * forwardRef typing | |
| * discriminated unions | |
| * React.FC pros/cons | |
| * typing custom hooks | |
| - `redux` | |
| - Store, Redux, CreateStore, applyMiddleware, | |
| - reducer, action, action creators | |
| - rootReducer, combineReducer({r1, r2}) | |
| - `react-redux lib` , | |
| - mapStateToProps, mapDispatchToProps, connect, dispatch | |
| - export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); | |
| - `Redux Toolkit` | |
| - lib thats simplifies the use of redux, reduces boilerplate | |
| - already integrated with redux-thunk; can be integrated with saga if required | |
| - createSlice({name, initalState, reducer, extraReducer}), | |
| - mySlice.actions, mySlice.reducer,configureStore | |
| - `Redux thunk ` | |
| - returning a function from action creator, automatically handled by thunk | |
| - handling async function calls in action creators | |
| - const store = createStore(rootReducer, applyMiddleware(thunk)); | |
| - `Redux saga` | |
| - More modular, and appropriate for complex react app than Redux thunk | |
| - uses generators functions in JS, yield and * | |
| - yield works like await; put is used to make internally call dispatch | |
| - takeEvery, put, call, race, takeLatest, take | |
| - `yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });` | |
| - `const data = yield call(api.fetchData, action.payload);` | |
| * React DevTools (browser extension) | |
| * Profiler (tab in react devtools for performance) | |
| * ESLint rules for hooks (eslint-plugin-react-hooks, exhaustive-deps) | |
| * plop.js scaffolding (file generator using template) | |
| * axios cancellation (using abort controller) | |
| * React Query DevTools (Enable it in code, to debug react query, inspect cached queries, stale states, refetching behavior, and manually trigger invalidations.) | |
| * bundlers (Vite/Webpack) | |
| * tree shaking | |
| * `React profiling for performance ccheck with react dev tools` |
Created by:
user-2034996