101 React Tips & Tricks For Beginners To Experts ✨

I have been working professionally with React for the past +5 years.

These are my 101 best (and non-opinionated) tips & tricks I learned over the years.

1. Use self-closing tags to keep your code compact

2. Prefer fragments over DOM nodes (e.g., div, span, etc.) to group elements

3. Use React fragment shorthand <></> (except if you need to set a key)

4. Prefer spreading props over accessing each one individually

5. When setting default values for props, do it while destructuring them

6. Drop curly braces when passing string type props.

7. Ensure that value is a boolean before using value && <Component {...props}/> to prevent displaying unexpected values on (#7-ensure-that-raw-value-endraw-is-a-boolean-before-using-raw-value-ampamp-ltcomponent-propsgt-endraw-to-prevent-displaying-unexpected-values-on-the-screen)

8. Use functions (inline or not) to avoid polluting your scope with intermediate variables

9. Use curried functions to reuse logic (and properly memoize callback functions)

10. Move data that doesn't rely on the component props/state outside of it for cleaner (and more efficient) code

11. When storing the selected item from a list, store the item ID rather than the entire item

12. If you're frequently checking a prop's value before doing something, introduce a new component

13. Use the CSS :empty pseudo-class to hide elements with no children

14. Group all the state and context at the top of the component

15. Leverage the children props for cleaner code (and performance benefits)

16. Build composable code with compound components

17. Make your code more extensible with render functions or component functions props

18. When dealing with different cases, use value === case && <Component /> to avoid holding onto old state

19. Always use error boundaries

20. Use crypto.randomUUID or Math.random to generate keys

21. Make sure your list items IDs are stable (i.e., they don't change between renders)

22. Strategically use the key attribute to trigger component re-renders

23. Use a ref callback function for tasks such as monitoring size changes and managing multiple node elements.

24. Colocate React components with their assets (e.g., styles, images, etc.)

25. Limit your component file size

26. Limit the number of return statements in your functional component file

27. Prefer named exports over default exports

28. Never create a state for a value that can be derived from other state or props

29. Keep the state at the lowest level necessary to minimize re-renders

30. Clarify the distinction between the initial state and the current state

31. Update state based on the previous state, especially when memoizing with useCallback

32. Use functions in useState for lazy initialization and performance gains, as they are invoked only once.

33. Use react context for broadly needed, static state to prevent prop drilling

34. React Context: Split your context into parts that change frequently and those that change infrequently to enhance (#34-react-context-split-your-context-into-parts-that-change-frequently-and-those-that-change-infrequently-to-enhance-app-performance)

35. React Context: Introduce a Provider component when the value computation is not straightforward

36. Consider using the useReducer hook as a lightweight state management solution

37. Simplify state updates with useImmer or useImmerReducer

38. Use Redux (or another state management solution) for complex client-side state accessed across multiple components

39. Redux: Use Redux DevTools to debug your state

40. Prevent unnecessary re-renders with memo

41. Specify an equality function with memo to instruct React on how to compare the props.

42. Prefer named functions over arrow functions when declaring a memoized component

43. Cache expensive computations or preserve references with useMemo

44. Use useCallback to memoize functions

45. Memoize callbacks or values returned from utility hooks to avoid performance issues

46. Leverage lazy loading and Suspense to make your apps load faster

47. Throttle your network to simulate a slow network

48. Use react-window or react-virtuoso to efficiently render lists

49. Use StrictMode to catch bugs in your components before deploying them to production

50. Install the React Developer Tools browser extension to view/edit your components and detect performance issues

51. React DevTools Components: Highlight components that render to identify potential issues

52. Leverage useDebugValue in your custom hooks for better visibility in React DevTools

53. Use the why-did-you-render library to track component rendering and identify potential performance bottlenecks

54. Hide logs during the second render in Strict Mode

55. Use React Testing Library to test your React components effectively

56. React Testing Library: Use testing playground to effortlessly create queries

57. Conduct end-to-end tests with Cypress or Playwright

58. Use MSW to mock network requests in your tests

59. Make sure you perform any required cleanup in your useEffect hooks

60. Use refs for accessing DOM elements

61. Use refs to preserve values across re-renders

62. Prefer named functions over arrow functions within hooks such as useEffect to easily find them in React Dev Tools

63. Encapsulate logic with custom hooks

64. Prefer functions over custom hooks

65. Prevent visual UI glitches by using the useLayoutEffect hook

66. Generate unique IDs for accessibility attributes with the useId hook

67. Use the useSyncExternalStoreto subscribe to an external store

68. Use the useDeferredValue hook to display the previous query results until the new results become available

69. Incorporate routing into your app with react-router

70. Implement first-class data fetching in your app with swr or React Query

71. Simplify form state management with libraries like formik, React Hook Form, or TanStack Form

72. Internationalize your app using `Format.js,` Lingui, or react-i18next.

73. Effortlessly create impressive animations with framer-motion

74. Tired of re-inventing the wheel with custom hooks? Check out https://usehooks.com/

75. Streamline app development by leveraging UI libraries like Shadcdn or Headless UI

76. Check your website's accessibility with the axe-core-npm library

77. Refactor React code effortlessly with react-codemod

78. Transform your app into a Progressive Web Application (PWA) using vite-pwa

79. Enhance your productivity with the Simple React Snippets snippets extension

80. Set editor.stickyScroll.enabled to true to quickly locate the current component

81. Simplify refactoring with extensions like VSCode Glean or VSCode React Refactor

82. Use ReactNode instead of JSX.Element | null | undefined | ... to keep your code more compact

83. Simplify the typing of components expecting children props with PropsWithChildren

84. Access element props efficiently with ComponentProps, ComponentPropsWithoutRef,…

85. Leverage types like MouseEventHandler, FocusEventHandler and others for concise typings

86. Specify types explicitly in useState, useRef, etc., when the type can't be or shouldn't be inferred from the initial value

87. Leverage the Record type for cleaner and more extensible code

88. Use the as const trick to accurately type your hook return values

89. Redux: Ensure proper typing by referring to https://react-redux.js.org/using-react-redux/usage-with-typescript to correctly type your Redux state (#89-redux-ensure-proper-typing-by-referring-to-httpsreactreduxjsorgusingreactreduxusagewithtypescript-to-correctly-type-your-redux-state-and-helpers)

90. Simplify your types with ComponentType

91. Make your code more reusable with TypeScript generics

92. Ensure precise typing with the NoInfer utility type

93. Effortlessly type refs with the ElementRef type helper

94. Boost your code's quality and safety with eslint-plugin-react and Prettier.

95. Log and monitor your app with tools like Sentry or Grafana Cloud Frontend Observability.

96. Start coding quickly with online IDEs like Code Sandbox or Stackblitz

97. Looking for advanced react skills? Check out these books 👇

98. Prepping React interviews? Check reactjs-interview-questions

99. Learn React best practices from experts like Nadia, Dan, Josh, Kent, etc.

100. Stay updated with the React ecosystem by subscribing to newsletters like This Week In React or ui.dev

101. Engage with the React community on platforms like r/reactjs