why-did-you-render
react-devtools
Our great sponsors
why-did-you-render | react-devtools | |
---|---|---|
47 | 3 | |
10,763 | 10,980 | |
1.2% | - | |
7.0 | 10.0 | |
15 days ago | over 4 years ago | |
JavaScript | ||
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
why-did-you-render
- Too many rerenders in react?
- Lag issues with RN
-
After a year developing with react, I think I've been doing all wrong
For debugging why a specific component re-renders, there is also why did you render
-
Why and How We Retired Elm at Culture Amp
It's a combination of many things, but imo one of the worst is all the footguns regarding state and the rerenders they cause
https://emnudge.dev/blog/react-hostage
It's so easy, that we monkey patch react to debug it https://github.com/welldone-software/why-did-you-render
Plus the vdom... Isn't great, the bundle size puts react at an inherit disadvantage, and the community has a knack for over reliance on bloated packages
-
7 Proven Practices to Boost Development Speed and Project Quality
When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.
- Free code review
- How do you test number of re-renders?
-
Tools to track re-renders
Couple of questions popped up after discovering this tool called `why-did-you-render`. My understanding is that it helps you keep track of why certain components render.
-
Are there any tools available to help see if useEffect() has a memory leak?
Not exactly what you are looking for (stop runaway effects is it) but this helps diagnose re-renders which can be related: https://github.com/welldone-software/why-did-you-render
react-devtools
-
7 best ReactJS developer tools to simplify your workflow
React Developer Tools is a browser extension that allows developers to inspect React components and their structure. This tool provides an easy way to debug and troubleshoot React applications. You can download it from its official GitHub repository: https://github.com/facebook/react-devtools.
-
Front-end Guide
Developer Experience - There are a number of tools that improves the development experience with React. React Developer Tools is a browser extension that allows you to inspect your component, view and manipulate its props and state. Hot reloading with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides codemod scripts to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.
-
Awesome React Resources
react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
What are some alternatives?
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
use-what-changed - A React hook and an easy to use babel-pugin to debug various React official hooks
nextjs-rewrite-test
react-render-tracker - React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
razzle - ✨ Create server-rendered universal JavaScript applications with no configuration
RunJS - RunJS is a JavaScript playground for macOS, Windows and Linux. Write code with instant feedback and access to Node.js and browser APIs.
MineRender - Quick, Easy, Interactive 3D/2D Renders of Minecraft
use-context-selector - React useContextSelector hook in userland
react-native-flash-message - React Native flashbar and top notification alert utility
import-maps - How to control the behavior of JavaScript imports
React-Sight - Visualization tool for React, with support for Fiber, Router (v4), and Redux
create-react-app - Set up a modern web app by running one command.