why-did-you-render
usehooks
Our great sponsors
| why-did-you-render | usehooks | |
|---|---|---|
| 47 | 12 | |
| 10,783 | 8,487 | |
| 1.4% | 3.1% | |
| 7.0 | 8.4 | |
| 21 days ago | 17 days ago | |
| JavaScript | MDX | |
| 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.
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
- 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
-
Is there a way to detect unwanted mutations in a React component?
maybe somethin like https://github.com/welldone-software/why-did-you-render
-
React Dev Tools: much worse experience with functions/hooks
This might help you out a bit.
usehooks
-
Best Next.js Libraries and Tools in 2024
Link: https://usehooks.com/
-
How to Track Previous State in React
In this approach (adapted from the usehooks package), we'll define a state variable currentCounter to track counter's value:
-
Adding a real feature to a project 🧛
The very first one I came across was a package called useHooks. It looked like a really cool package with tonnes of hooks to use, and useQueue was one of them.
-
Thoughts on useEffect ?
there are a bunch of library custom hooks, sometimes they encapsulate logic better, you should prefer them or build your own instead.
- useHooks – A collection of Server Component safe React Hooks
-
UseHooks – A Collection of Server Component Safe React Hooks
I saw "useDebounce" and thought "what the hell does debounce have anything to do with react render cycle?". When I check the code, `useDebounce` does... I don't even know what it does, delayed set state?
https://github.com/uidotdev/usehooks/blob/380e83fa267157832e...
What are some alternatives?
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
usehooks-ts - React hook library, ready to use, written in Typescript.
use-what-changed - A React hook and an easy to use babel-pugin to debug various React official hooks
vueuse - Collection of essential Vue Composition Utilities for Vue 2 and 3
nextjs-rewrite-test
30-Days-Of-React - 30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
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.
awesome-react-hooks - A curated list about React Hooks
razzle - ✨ Create server-rendered universal JavaScript applications with no configuration
react-use - React Hooks — 👍