React

"React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications."

Features

• Declarative - "Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."
• Component-based - "Build encapsulated components that manage their own state, then compose them to make complex UIs."
• Learn Once, Write Anywhere - "We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code."

Resources

• React Bits - A compilation of React Patterns, techniques, tips and tricks

Utilities

• craco - all the benefits of create-react-app and customization without using 'eject' by adding a single craco.config.js
• react-use - collection of essential React Hooks
• react-native-push-notificaiton
• recoil - A state management library for React
• jotai - Primitive and flexible state management for React

Hooks

Official

Basic

• useState
• useEffect
• useContext

Additional

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Newer

• useDeferredValue
• useTransition
• useId
• useSyncExternalStore
• useInsertionEffect

(https://youtu.be/uCEYAz_bTd4)

3rd Party

• usePagination
• useHotKey
• useFullscreen
• useIntersection

External Data

• swr - React Hooks for Data Fetching
• react-query - Fetch, cache and update data

Visual Effects

• Neomorphism design digital clock
• Goeey Effect

UI Frameworks

• React Bootstrap 5
• Mantine
• Chakra
• Bulma React Components
• Ant
• ShadCN
• Radix

Charts

• Victory

Libraries (TODO split this is into sub categories)

• grommet - responsive and accessible mobile-first component library
• useAxios
• react-hook-form
• react-hotkeys
• react-syntax-highlighter
• rc-tooltip
• styled-components
• react-json-view

React Native Libraries

• react-native-auth0
• react-native-modal-dropdown
• react-navigation
• react-moment
• react-native-gifted-chat

Examples

• voicecache - A voice recording app built with the recoil state management library

Error Boundaries

"In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them."

More details.

React Suspense

"React.Suspense is a component that tells React to wait for some code-splitting to load before rendering the component. It’s a way to declaratively “suspend” rendering while some async work is happening, and show a spinner, or a loading state, or anything else while we wait."