unionpdf VS react-scan

For anyone want to build a tool like this, you can try my WIP library here, it's based on Pdfium and Wasm, you can build a tool support editing and previewing with it.

https://github.com/jichang/unionpdf

GitHub - jichang/unionpdf: A universal pdf render in React

3. React Scan

Re: excessive useEffects, this article from React docs is great: https://react.dev/learn/you-might-not-need-an-effect

Re: unrefactorable, large components, you probably want to break these down into smaller pieces. This talk ("Composition is all you need") is an excellent guide on the topic: https://youtu.be/4KvbVq3Eg5w?si=1esmAtrJthois1uf

Re: performance, people overstate the performance overhead of VDOM. Badly performing React applications are virtually always due to bad implementations. React Scan is an excellent tool for tracking down components that need optimizing: https://react-scan.com/

Re: getting other people on the team to write good code, this is the biggest struggle IMO. Frontend is hard because there's a lot of bad ways to solve a problem, and co-workers will insist that their changes work so why invest more time into building things correctly. I've only found success here by first writing an entire feature with good patterns and pointing to it as reference for other teams. People are more willing to make changes if they find precedent in the codebase.

After the change, react-scan no longer complained about excessive component re-renders. But now, it complained about the Javascript/React hooks execution time took too long.

please look : React-Scan and Theo Browne's very useful video about this

In the example provided in react-scan repository, you will find this below code in aidenybai/react-scan/examples/sierpinski/src/index.jsx.

- how long it took for the GPU to actually draw to the screen

This data is visualized in an easy to understand ranked bar chart.

We also tell you exactly what props, state, and context caused a component to render. And when a component could of been memoized to avoid all its renders.

You can start using React Scan in your React app in <1 min using our script tag- installation reference: https://react-scan.com

iconSprite is assigned a value returned by DOMParser.documentElement. parseFromString accepts ICONS that is imported from packages/scan/src/web/assets/svgs/svgs.ts.

react-scan helps you scan for React performance issues and eliminate slow renders in your app.