React Component Names

React Scan

Scan React apps for performance problems React Scan automatically detects performance issues in your React app Previously, existing tools required lots of code change, lacked simple visual cues, and didn't have a simple, portable API - Requires no code changes – just drop it in - Highlights exactly the components you need to optimize - Available via script tag, npm, CLI, you name it!

React in ChatGPT

React in ChatGPT integrates with ChatGPT, allowing users to render React components within the chat interface. It's perfect for developers and enthusiasts who frequently interact with React-based code snippets or UI components.

click-to-react-component

Option+Click React components in your browser to instantly open the source in VS Code Devtool for React Option+Click React components in your browser to instantly open the source in VS Code click-to-react-component is the browser version for https://github.com/ericclemmons/click-to-component thanks ericclemmons for implementing this library

Reactime

A Chrome extension for time travel debugging and performance monitoring in React applications. Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020. Reactime is an open source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency. - Record Snapshots of Application State and Accessibility Tree - Provider/Consumer Panel for useContext Hook - Import and Export Snapshots of State - Time-Travel Debugging - Snapshot Series Comparison - Component Tree Visualization - React Router Compatibility - Component Render Time & Frequency - Support for Gatsby, Next.js and Remix - TypeScript Support - Ability to Reconnect - Web Performance Metrics - Tutorial Walkthrough - Prop Visualization - Intuitive Layout and Modern Design - Dark Mode Reactime 26.0 introduces transformative updates that redefine React debugging. The groundbreaking Providers/Consumers Panel now captures and visualizes state changes from useContext hooks, offering a real-time view of provider-consumer relationships and live context state values. A revamped time travel slider delivers enhanced control over debugging with intuitive navigation and playthrough options. The extension also boasts a modernized UI with dark mode for better usability, improved reliability through critical bug fixes, and the restoration of the accessibility tree tab for addressing potential accessibility issues. With these innovations, Reactime v26 empowers developers to streamline workflows and optimize complex state flows like never before. ❓ Why is Reactime not recording new state changes? Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. ❓ Why isn’t Reactime finding my hooks? Reactime detects and monitors hooks by traversing your application’s unminified React code in development mode. If your build process is minifying or uglifying your code—even for development builds—Reactime may not be able to properly locate and track your hooks. To fix this: Ensure a true development build: Double-check your bundler or build tool configuration (e.g., Webpack, Babel, Vite, etc.) to make sure that your application is not minimized or uglified in development mode. For example, with Webpack, make sure you’re running in mode: 'development', which should disable default minification. In a Create React App project, simply running npm start or yarn start will automatically configure a non-minified development build. Check for overrides: Ensure there are no custom Babel or Webpack plugins that minify your code, especially if you’re using frameworks like Next.js or Gatsby. Sometimes additional plugins or scripts might be running under the hood. Restart & rebuild: After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. ❓ Why is Reactime telling me that no React application is found? Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple of times until you see Reactime running. ❓ Why do I need to have React Dev Tools enabled? Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer ❓ I found a bug in Reactime Reactime is an open-source project, and we'd love to hear from you about improving the user experience. Please read the 👩‍💻 Developer README, and create a pull request (or issue) to propose and collaborate on changes to Reactime.