I recently shipped a fairly large website (~50k lines of code) built in Next.js and React. Here’s a
about some of the key learnings:
-
Show this thread
-
Let’s talk about React Hooks. To me they’ve been both a bit of a blessing and a curse. First off, some things can be solved really beautifully (data fetching, async loading of 3P scripts, etc.). But for some things it just feels like the wrong tool for the job.
3 replies 3 retweets 61 likesShow this thread -
I believe
@dan_abramov pointed out that the previous lifecycle methods often introduced subtle bugs and inconsistencies. This is totally true, but moving to hooks introduced a whole new class of problems (at least for me).2 replies 3 retweets 52 likesShow this thread -
The useEffect hook has subtleties that isn’t obvious at a first glance. For instance, passing callback functions as dependencies to useEffect (that may or may not change on each render depending on the consumer of the component) bit me multiple times.
5 replies 5 retweets 52 likesShow this thread -
Moving on to Next.js. It really helped a lot to quickly get us going (great job
@timneutkens,@rauchg, et al!). I did however put a bit too much trust into getting solid performance right out-of-the-box.1 reply 1 retweet 28 likesShow this thread -
Even though we were doing a lot of things right (server side rendering, http/2, using a CDN, efficient caching, aggressive code splitting, etc.), we were just getting a moderate ~55 points in Lighthouse.
4 replies 1 retweet 33 likesShow this thread -
It was especially the time-to-interactive metrics that was causing issues. Was this what
@slightlylate has been talking about all this time?2 replies 1 retweet 23 likesShow this thread
-
-
Replying to @slightlylate @PeterssonJesper and
where, Link please .. I'm investigating a similar case at work
0 replies 0 retweets 0 likesThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.