Comments (5)
This is great. How about a suggestion for the use of the useEffect()
Hook to avoid having the effect from running on every render?
--> https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
{
// ...,
skips_applying_effect: If you are using the useEffect() Hook, ensure that you optimize performance by skipping the effect only until certain dependencies have changed. [Learn more](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)
}
from lighthouse-stack-packs.
This is a great start @housseindjirdeh
A couple of questions to get the ball rolling:
- Unused CSS could be used as a suggestion to consider taking up css-in-js? †
- Unused JS might be a better signal for suggesting code splitting?
- Are we able to get introspection to suggest when to use
React.PureComponent
? - What about critical/blocking js? If someone builds a single page app that isn't server side renders and there's a critical path to
app.js
+vendor.js
, should we suggest to preload those resources? OR should we suggest service workers so that the bytecode is cached?
† (For the naysayers: As long as it's server-side rendered (and embedded), it's always going to be faster than traditional CSS approaches because the page will only include the CSS it requires.).
from lighthouse-stack-packs.
@djirdehh Ooh good call. With stack packs, we can only extend existing audits (can't add a new skips_applying_effect
one), but I think we can definitely include that mention into an already existing description 🚀
from lighthouse-stack-packs.
@benschwarz Thanks a ton, these are all great suggestions.
Unused CSS could be used as a suggestion to consider taking up css-in-js?
Although I agree with your footnote, definitely a tricky one. We're trying to not provide directions that are specific but not particularly to React itself. Might be safest to not point users in that direction since many have pretty strong opinions 😅
Unused JS might be a better signal for suggesting code splitting?
Good call 👍
Are we able to get introspection to suggest when to use React.PureComponent?
Yep like @djirdehh's suggestion, I think it would be worthwhile to include a mention of the different approaches that can be taken to minimize re-renders. Will try and find a place for it!
What about critical/blocking js?
Definitely would be good to mention preloading/service workers. The main Lighthouse audits suggest these so would be nice if we can mention something more relevant to React here 🤔
from lighthouse-stack-packs.
Is there any way to take advantage of the built in React warnings? The react development mode shows up warns about potential bad practices such as forgetting key attribute in list elements
and so on. If that information is not too hard to retrieve then it might be a good case...
Thinking about bad practices that might lead to bugs maybe look up to potential wrong usage. For example, callback functions executed in the render phase instead of just triggered by the action.
<button onClick={callback("fire")} />
I do not know if this goes too much under implementation details I just found myself thinking about it.
from lighthouse-stack-packs.
Related Issues (20)
- React Pack HOT 1
- Angular Pack HOT 1
- Illegal formatting in AMP stack pack HOT 1
- Drupal Stack pack HOT 2
- Typo in magento HOT 1
- React "route navigations"
- Suggestion: Ember.js Stack Pack HOT 1
- More high-level audit suggestions in the Drupal pack HOT 1
- Request list of checks Lighthouse does to write an up to stack pack HOT 1
- `time-to-first-byte` was renamed
- Drupal `uses-responsize-images` unclear HOT 2
- How do I use? HOT 1
- type gen needs some tlc
- nextjs logo is low contrast in dark mode
- Broken link in wordpress
- Add INP-related advice re: React 18
- [WordPress] Suggest the Performance Lab plugin where applicable HOT 4
- Suggestion: Improve docs to add 'offline' stack packs; build your own stack pack and recommendations HOT 5
- de-dupe some strings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lighthouse-stack-packs.