why-did-you-render
RunJS
why-did-you-render | RunJS | |
---|---|---|
49 | 36 | |
11,644 | 2,069 | |
1.6% | 0.3% | |
8.2 | 4.6 | |
20 days ago | 4 months ago | |
JavaScript | ||
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.
why-did-you-render
-
React Component Libraries: Overview of 19 Top Libs
Why-Did-You-Render Documentation
-
How to track React re-renders - why-did-you-render issues
Yet - its codesanbox examples target React 16. I tried to upgrade its codesandbox examples to React 18. They run as React applications, but no wdyr concole reports are generated. There are some issues that reports this problem, e.g. https://github.com/welldone-software/why-did-you-render/issues/294 but generally the activity is almost nonexistant. Stackoveflow threads has only severl questions about wdyr.
- Too many rerenders in react?
- Lag issues with RN
- After a year developing with react, I think I've been doing all wrong
- How can I stop a component from reloading all the time?.
-
How to speed up React Native screen when full of TextInput?
Check out why-did-you-render. It may tell you some more information.
-
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
RunJS
-
JavaScript Arrays: Filter
I strongly recommend pasting some of these examples into a browser console, a code sandbox website, or a playground like RunJS so you can try different changes to see what happens.
-
JavaScript Arrays: Map
For this one I didn't put the output. If you want to try it yourself I suggest pasting this into a browser console or a tool like RunJS, which I use to write and test these examples.
-
10 Useful Developer Tools Every Developer Needs to Know 🧑💻📚
2. RunJS – A Fast & Interactive JavaScript Playground
-
Learn by Proxy: JavaScript Quick Bits
You can run this code in the browser console, the Node REPL, or in my favorite tool, RunJS.
-
Ask HN: Those making $500/month on side projects in 2024 – Show and tell
I built https://runjs.app because I wanted an easy way to run JavaScript and test out ideas.
-
Dev Playground an alternative to RunJS
RunJS is a commendable project that we have utilized for quick code testing. Unfortunately, the latest version imposes a daily limit of 50 runs.
-
6 Skills You Need To Read Tech Articles Like a Pro
Not every article needs you to sit down and write some code, but it can be helpful. I often use a tool like RunJS to hack together quick code samples or refactor functions with new ideas. For bigger efforts I might clone a repo or create a branch in my project to try something new.
-
Discover JSREPL.io – A JavaScript REPL & Playground
Discovering RunJS was a game-changer for me. I love how it displays the result of each expression right next to the code. This makes testing snippets incredibly productive without the constant need for console.log or breakpoints.
-
Show HN: Edna, note taking app for developers
Me too - I currently use https://runjs.app/ while developing but this would fit better.
-
RunJS - A JavaScript and TypeScript Local Playground
Recently, I got a license from Luke Haas to explore RunJS, and I'm impressed with some of the features. I've been putting it to the test and integrating it into my workflow. It's worth mentioning that there is a free version with core functionality, and the license gives you lifetime access (with updates for 1 year), which is rare these days. Another thing I love about it is that it's open source. In this post, I'll be sharing my experience with RunJS and how it's helping me in my daily work.
What are some alternatives?
react-render-tracker - React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
quokka - Repository for Quokka.js questions and issues
use-what-changed - A React hook and an easy to use babel-pugin to debug various React official hooks
typescript-notebook - Run JavaScript and TypeScript in node.js within VS Code notebooks with excellent support for debugging, tensorflowjs visulizations, plotly, danfojs, etc
MineRender - Quick, Easy, Interactive 3D/2D Renders of Minecraft
TwitchElectron - Cross compatible Twitch app packaged with Electron.
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
ijavascript - IJavascript is a javascript kernel for the Jupyter notebook
nextjs-rewrite-test
vim-import-js - Vim plugin for ImportJS
razzle - ✨ Create server-rendered universal JavaScript applications with no configuration
fend - Arbitrary-precision unit-aware calculator