GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → open-source-labs → Reactime

open-source-labs / Reactime

Licence: mit
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

Programming Languages

typescript
32286 projects

Labels

reactjsperformancenextjsgatsbyrenderingrenderer

Projects that are alternatives of or similar to Reactime

makma
Makma is a deferred Vulkan renderer written in C++.
Stars: ✭ 77 (-93.68%)
Mutual labels:  rendering, renderer
Jamstackthemes
A list of themes and starters for JAMstack sites.
Stars: ✭ 298 (-75.55%)
Mutual labels:  gatsby, nextjs
LuisaRender
High-Performance Multiple-Backend Renderer Based on LuisaCompute
Stars: ✭ 47 (-96.14%)
Mutual labels:  rendering, renderer
Useauth
The simplest way to add authentication to your React app. Supports various providers.
Stars: ✭ 2,532 (+107.71%)
Mutual labels:  gatsby, nextjs
Tinacms
Open source editor that brings visual editing into React websites. A developer-centric CMS to build contextual and intuitive editing experience without sacrificing code quality.
Stars: ✭ 6,804 (+458.16%)
Mutual labels:  gatsby, nextjs
Photon-v2
A program that takes photographs of a virtual world.
Stars: ✭ 75 (-93.85%)
Mutual labels:  rendering, renderer
Graphcms Examples
Example projects to help you get started with GraphCMS
Stars: ✭ 295 (-75.8%)
Mutual labels:  gatsby, nextjs
Create Ueno App
The easiest and fastest way to create new web projects with next, gatsby, create-react-app and mobile projects with react-native.
Stars: ✭ 116 (-90.48%)
Mutual labels:  gatsby, nextjs
Ram
⚛️ React Application Manager: create and run React (and other) applications – no command line or build setup required
Stars: ✭ 585 (-52.01%)
Mutual labels:  gatsby, nextjs
Reflexjs
Starter kits, themes and blocks to help you build Gatsby and Next.js sites faster. Built on top of a best-in-class styling library.
Stars: ✭ 571 (-53.16%)
Mutual labels:  gatsby, nextjs
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (-85.56%)
Mutual labels:  gatsby, nextjs
Flycube
Graphics API wrapper is written in C++ on top of Directx 12 and Vulkan. Provides main features including ray tracing.
Stars: ✭ 78 (-93.6%)
Mutual labels:  rendering, renderer
Actions Gh Pages
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
Stars: ✭ 2,576 (+111.32%)
Mutual labels:  gatsby, nextjs
DuEngine
An efficient interactive C++ renderer for ShaderToy-alike demos with 2D/3D/CubeMap/Video/Camera/LightField/Volume textures. (Partially used in my I3D 2018 papers)
Stars: ✭ 62 (-94.91%)
Mutual labels:  rendering, renderer
Mdx Embed
Embed 3rd party media content in MDX - no import required 🧽
Stars: ✭ 119 (-90.24%)
Mutual labels:  gatsby, nextjs
Next Super Performance
The case of partial hydration (with Next and Preact)
Stars: ✭ 272 (-77.69%)
Mutual labels:  nextjs, performance
Electron Next Skeleton
An example Electron app built with Next.js
Stars: ✭ 168 (-86.22%)
Mutual labels:  nextjs, renderer
Jamstack Ecommerce
A starter project for building performant ECommerce applications with Next.js and React
Stars: ✭ 1,384 (+13.54%)
Mutual labels:  gatsby, nextjs
React Esi
React ESI: Blazing-fast Server-Side Rendering for React and Next.js
Stars: ✭ 537 (-55.95%)
Mutual labels:  nextjs, performance
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+2769.73%)
Mutual labels:  rendering, renderer
View All Similar Projects ➔




React Performance Tool
Nominated for React Open Source Awards 2020

Reactime is a performance and debugging tool for React developers (Beta version for Gatsby and Next.js). It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state. It also detects the amount of renders of each component and average time of rendering.


GitHub Build Status npm version BabelPresetPrefs LintPrefs


🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇫🇷   VERSION FRANÇAISE

How To Use • Features • Website • Read More

Currently, Reactime supports React apps using stateful components and Hooks, including frameworks like Gatsby and Next.js, with beta support for Recoil and Context API.

Reactime version 8.0 allows you to run A/B testing on your application by storing a "series" of state data snapshots. At any stage in the dev cycle, devs could run Reactime again and select any past series to do an A/B test with the current series of snapshots. With Save Series, developers have access to view trends in their App's component render times during development by comparing the previous series of snapshots.

Reactime 8.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 8.0 includes expanded typedoc documentation for developers looking to contribute to the source code.

After installing Reactime, you can test its functionalities with your React application in development mode.

Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features.

Installation

To get started, install the Reactime extension from Chrome Web Store.

NOTE: The React Developer Tools extension is also required for Reactime to run, if you do not already have it installed on your browser.

Alternative Installation

Use src/extension/build/build.zip for manual installation in Developer mode. Turn on 'Allow access to file URLs' in extension details page if testing locally.

How to Use

After installing the Chrome extension, just open up your project in the browser.

Then open up your Chrome DevTools and navigate to the Reactime panel.

Troubleshooting

❓ 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 times until you see Reactime running.

❓ There is a black screen instead of the Reactime extension

Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.

❓ I found a bug in Reactime

Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please, create a pull request (or issue) to propose and collaborate on changes to a repository.

Features

🔹 Re-render Optimization

One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.

🔹 Gatsby

Reactime offers fully support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.

🔹 Next.js

Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.

🔹 Recording

Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.

🔹 Snapshot Comparison

You can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.


🔹 Viewing

You can click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.

🔹 Jumping

Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.

🔹 TypeScript Support

Reactime offers beta support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.

🔹 Documentation

After cloning this repository, developers can simply run npm run docs at the root level and serve the dynamically generated /docs/index.html file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.


Additional Features

  • identifying unnecessary re-renders
  • hover functionality to view tooltip details on state visualizations
  • ability to pan and zoom on state visualizations
  • a dropdown to support development of projects on multiple tabs
  • a slider to move through snapshots quickly
  • a play button to move through snapshots automatically
  • a lock button, which stops recording each snapshot
  • a persist button to keep snapshots upon refresh (handy when changing code and debugging)
  • download/upload the current snapshots in memory
  • declarative titles in the actions sidebar

Read More

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].