react-loadable
why-did-you-render
Our great sponsors
react-loadable | why-did-you-render | |
---|---|---|
6 | 47 | |
16,591 | 10,716 | |
- | 1.4% | |
0.0 | 7.0 | |
over 1 year ago | 13 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
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.
react-loadable
-
16 React Tools to Help You Keep Your Sanity in a Crazy World
Website: https://github.com/jamiebuilds/react-loadable
-
Some Very Cool (Underrated maybe) React Libraries
React Loadable: This library makes it easy to split your React code into smaller, lazy-loaded chunks that can be loaded on demand. This can significantly improve the initial loading time of your application, especially for large and complex apps. https://github.com/jamiebuilds/react-loadable
-
Awesome React Resources
react-loadable - A higher order component for loading components with promises
-
How to choose a third party package
It's very important that you are choosing an active project instead of a dead/unmaintained project. An active project improves over time through community feedback. An unmaintained project does not move forward, fix functional bugs or patch security issues. Sometimes, a very popular package can be abandoned and go into a "frozen" state with many open issues and pull requests. It might have been a great solution in the past, but this is a sign that we have to move on. An example is react-loadable. It was a great solution for a very long time for code-splitting in React. I totally loved it. But it's stale now with many issues and PRs since 2018 (this post is written at the end of 2021). Now, if I need to split code in React, I use loadable-components, which is in active development, becoming more popular, patches bugs reported by the community, and most importantly, solves my problems. My personal advice: choose a package that's active in the last 3-6 months, with issues that are being resolved and PRs that are being merged.
-
React Lazy Loading; does it slow down your app?
Preloading is possible with react-loadable: https://github.com/jamiebuilds/react-loadable#preloading
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
What are some alternatives?
loadable-components - The recommended Code Splitting library for React ✂️✨
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
react-devtools - An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
react-snap - 👻 Zero-configuration framework-agnostic static prerendering for SPAs
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.
Next.js - The React Framework
babel-plugin-styled-components - Improve the debugging experience and add server-side rendering support to styled-components
MineRender - Quick, Easy, Interactive 3D/2D Renders of Minecraft