{"repo":"welldone-software/why-did-you-render","free":true,"listed":false,"github":"https://github.com/welldone-software/why-did-you-render","clone":"git clone https://github.com/welldone-software/why-did-you-render.git","description":"why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)","language":"JavaScript","stars":12512,"topics":["react","component","pure","performance","render","update","tool","react-native","purecomponent","hooks-tracking"],"license":"MIT","category":"mobile-apps","readme_excerpt":"Why Did You Render why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) For example, if you pass style={{width: '100%'}} to a big memo component it would always re-render on every element creation: It can also help you to simply track when and why a certain component re-renders. [!CAUTION] The library was not tested with React Compiler at all. I believe it's completely incompatible with it. [!CAUTION] Not all re-renders are \"bad\" . Sometimes shenanigan to reduce re-renders can either hurt your App's performance or have a negligible effect, in which case it would be just a waste of your efforts, and complicate your code. Try to focus on heavier components when optimizing and use the React DevTools Profiler to measure the effects of any changes. [!NOTE] I've joined the React team, specifically working on React tooling. This role has opened up exciting opportunities to enhance the developer experience for React users— and your input could offer valuable insights to help me with this effort. Please join the conversation in the discussion thread! Setup The latest version of the library was tested (unit tests and E2E)) with React@19 only. For React 18 , please see the readme for version @^8. For React 17 and React 16 , please see the readme for version @^7. or Set the library to be the React's importSource and make sure preset-react is in development mode. This is because React 19 requi","default_branch":null,"files":null,"tree":[],"storefront":"/r/welldone-software","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/welldone-software/why-did-you-render/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}