Meta tags:
description= Today s Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.;
Headings (most frequently used words):
use, and, effects, effect, fetching, with, data, in, useeffect, to, handling, using, effectively, faq, comments, introduction, race, condition, cleanup, react, 18, correct, understanding, action, executing, event, handlers, exploring, misuses, of, optimizing, query, 10, problems, 11, state, machines, 12, tools, for, real, world, 13, linting, rules, alternatives, 14, discussion, conclusion, check, out, more, articles, videos, workshops, on, related, topic, subscribe, the, top, dev, conferences, available, other, languages,
Text of the page (most frequently used words):
the (257), and (256), you (174), react (165), use (141), that (136), this (115), #effects (98), for (84), effect (75), state (68), with (64), like (59), but (53), going (52), are (51), about (44), not (44), what (44), have (43), your (41), using (40), when (39), all (37), just (35), #fetching (34), then (34), useeffect (33), know (32), where (32), event (31), more (29), rendering (29), data (28), here (28), because (27), don (26), which (26), performance (25), really (25), can (24), there (24), they (23), how (23), right (23), one (23), talk (23), hook (21), david (21), need (20), some (20), docs (20), action (20), learn (19), let (19), 2026 (18), get (18), will (18), was (18), should (18), something (18), think (17), could (17), instead (17), top (16), change (16), now (16), might (16), put (16), want (15), advanced (15), management (15), hooks (15), next (15), content (15), query (15), short (15), component (15), doing (15), new (14), lot (14), way (14), side (14), description (14), directly (14), inside (14), development (13), workshop (13), min (13), these (13), okay (13), sort (13), fetch (13), activity (13), from (12), components (12), only (12), server (12), things (12), did (12), forget (12), very (12), dependency (12), handlers (12), much (11), those (11), into (11), developers (11), also (11), yeah (11), machines (11), example (11), start (11), thing (11), execute (11), cleanup (11), handler (11), code (10), summit (10), little (10), flashlist (10), why (10), make (10), out (10), see (10), concurrent (10), well (10), render (10), handling (10), stately (10), happen (10), trigger (10), over (10), events (9), web (9), tools (9), api (9), first (9), work (9), global (9), time (9), remix (9), actually (9), good (9), outside (9), read (9), beta (9), even (9), 2027 (8), our (8), best (8), people (8), together (8), keep (8), issues (8), most (8), better (8), user (8), memo (8), everything (8), problem (8), problems (8), them (8), stuff (8), again (8), set (8), prop (8), indirection (8), move (8), same (8), practices (7), typescript (7), before (7), had (7), simple (7), mode (7), benefits (7), handle (7), didn (7), pinia (7), store (7), idea (7), doesn (7), redux (7), slides (7), thank (7), bit (7), reducer (7), functions (7), say (7), guess (7), avoid (7), video (7), ref (7), race (7), shouldn (7), library (6), subscribe (6), vue (6), three (6), featured (6), 2021 (6), complex (6), profiler (6), optimizing (6), many (6), understanding (6), used (6), behavior (6), synchronization (6), would (6), try (6), until (6), around (6), app (6), any (6), logic (6), source (6), framework (6), check (6), array (6), form (6), possible (6), focus (6), gonna (6), basically (6), remember (6), transitions (6), declarative (6), executing (6), putting (6), cache (6), infinite (6), imperative (6), caused (6), learned (6), corschied (6), conditions (5), berlin (5), day (5), london (5), edition (5), york (5), dev (5), talks (5), devtools (5), two (5), part (5), show (5), performant (5), still (5), built (5), props (5), build (5), 2022 (5), full (5), applications (5), load (5), actions (5), optimize (5), ivan (5), other (5), too (5), won (5), has (5), stores (5), value (5), real (5), different (5), without (5), great (5), maybe (5), add (5), does (5), external (5), rules (5), depending (5), indicate (5), wanted (5), executed (5), playing (5), whole (5), sure (5), feels (5), condition (5), strict (5), isfocused (5), jsnation (4), authors (4), core (4), free (4), native (4), today (4), list (4), team (4), dive (4), based (4), ways (4), look (4), changes (4), potential (4), explore (4), understand (4), building (4), back (4), few (4), later (4), who (4), future (4), discusses (4), meta (4), open (4), create (4), com (4), guide (4), old (4), such (4), double (4), effectively (4), online (4), twitter (4), piano (4), actual (4), probably (4), tool (4), machine (4), promise (4), editor (4), questions (4), thinking (4), approach (4), submit (4), hey (4), early (4), linting (4), lint (4), said (4), nice (4), summary (4), imagine (4), types (4), goes (4), favorite (4), works (4), loading (4), true (4), wrong (4), twice (4), call (4), waterfalls (4), cetera (4), reason (4), misuse (4), happens (4), while (4), watching (4), documentation (4), arrays (4), tip (4), gitnation (3), terms (3), support (3), feedback (3), faq (3), tech (3), conferences (3), sign (3), updates (3), may (3), coding (3), oct (3), nov (3), upcoming (3), follow (3), workshops (3), conference (3), testing (3), quality (3), node (3), popular (3), articles (3), discover (3), main (3), driven (3), both (3), key (3), along (3), tips (3), take (3), etc (3), plugins (3), fix (3), class (3), often (3), simpler (3), improve (3), pros (3), remote (3), suspense (3), long (3), easy (3), topics (3), end (3), their (3), utilize (3), 2023 (3), debugging (3), were (3), random (3), help (3), close (3), step (3), hear (3), solution (3), process (3), custom (3), compiler (3), elimination (3), offers (3), version (3), kent (3), rather (3), than (3), examples (3), eliminate (3), solve (3), html (3), transcription (3), looking (3), uso (3), efectivo (3), available (3), cool (3), says (3), closed (3), question (3), play (3), pretty (3), alternatives (3), supposed (3), arguments (3), request (3), down (3), through (3), feel (3), world (3), post (3), official (3), honestly (3), talked (3), least (3), transition (3), screen (3), false (3), setting (3), type (3), talking (3), initializing (3), singletons (3), done (3), run (3), recommend (3), dan (3), function (3), whatever (3), spinners (3), notice (3), swr (3), whenever (3), big (3), subscribing (3), rid (3), parts (3), tell (3), onopen (3), onclose (3), course (3), loop (3), highlights (3), total (3), makes (3), saying (3), common (3), loops (3), though (3), causes (3), every (3), forward (3), fire (3), ongoing (3), off (3), capital (3), signs (3), missing (3), calls (3), mounts (3), discovered (3), recommends (3), async (3), 2018 (3), syntax (3), excited (3), visualizing (3), khourshid (3), nation (2), stats (2), product (2), amsterdam (2), singapore (2), apr (2), asia (2), dec (2), insights (2), css (2), builders (2), founders (2), javascript (2), tags (2), multipass (2), test (2), reactjs (2), wildly (2), thus (2), supported (2), increasingly (2), find (2), topic (2), getting (2), ide (2), tdd (2), created (2), shopify (2), flatlist (2), flipper (2), teach (2), cover (2), cases (2), presentation (2), write (2), introducing (2), deep (2), quite (2), functional (2), each (2), various (2), versus (2), usereducer (2), maurice (2), beijer (2), release (2), finally (2), affect (2), application (2), switch (2), interactive (2), adventures (2), techniques (2), needed (2), rendered (2), between (2), ssr (2), including (2), implement (2), mutation (2), seo (2), overall (2), debug (2), slow (2), interaction (2), chrome (2), clicking (2), frustration (2), times (2), solutions (2), usememo (2), suited (2), engineers (2), already (2), familiar (2), covering (2), word (2), masterclass (2), challenges (2), discussed (2), introduced (2), break (2), aims (2), explores (2), automatically (2), dependencies (2), dead (2), idiomatic (2), allows (2), error (2), recommended (2), per (2), efficient (2), compared (2), beyond (2), live (2), dodds (2), concept (2), introduces (2), importance (2), uses (2), easier (2), constantly (2), frameworks (2), focuses (2), provides (2), functionality (2), websites (2), videos (2), posted (2), ever (2), contributing (2), yes (2), contribute (2), once (2), weird (2), visualize (2), slide (2), containers (2), press (2), button (2), point (2), gets (2), far (2), crash (2), answer (2), thoughts (2), rule (2), become (2), job (2), blog (2), resource (2), order (2), ensure (2), mean (2), watch (2), ask (2), sli (2), software (2), beautiful (2), wrap (2), last (2), having (2), telling (2), purpose (2), declaratively (2), expressing (2), mini (2), toggle (2), haven (2), bigger (2), checking (2), second (2), listening (2), ending (2), looks (2), send (2), maintain (2), biggest (2), submitting (2), bunch (2), abstract (2), another (2), place (2), calling (2), flag (2), stick (2), screaming (2), everywhere (2), chasing (2), unloading (2), soon (2), kill (2), guarantee (2), beginning (2), interesting (2), specific (2), whether (2), usesyncexternalstore (2), maintainers (2), libraries (2), isopen (2), calculating (2), anyway (2), communicating (2), parents (2), transforming (2), items (2), derived (2), values (2), called (2), sections (2), longer (2), exploring (2), result (2), sorry (2), tried (2), single (2), seen (2), equals (2), possibility (2), impossible (2), multiple (2), input (2), fancy (2), lifecycle (2), specifically (2), listen (2), turn (2), onsubmit (2), tie (2), closer (2), tying (2), unmount (2), realized (2), exec (2), breaks (2), conditionals (2), conditional (2), hoc (2), correct (2), dance (2), canceled (2), copy (2), paste (2), worked (2), however (2), crucial (2), empty (2), aws (2), yelled (2), await (2), wow (2), hello (2), everyone (2), name (2), within (2), running (2), sentry (2), november (2), rights, reserved, community, conduct, privacy, policy, legal, rss, feeds, assistance, promote, contact, careers, company, techlead, conf, adopting, orgs, nyc, sponsor, grow, depth, engineer, leader, teams, experts, companies, miss, deal, discounted, tickets, newsletter, design, systems, fullstack, frontend, svelte, mentors, menu, given, quickly, hard, accurate, learning, materials, jetbrains, ides, combination, series, meaning, steps, productive, projects, emphasize, tricks, paul, everitt, 174, minimum, effort, own, benchmarking, notch, quick, migrating, teaching, utilizing, provided, mainly, usebenchmark, flame, graph, lists, fps, gettype, sample, tasks, uncover, addition, major, almost, deceptively, plenty, mess, turns, cons, usestate, usecontext, efficiently, uselayouteffect, 177, awaited, upgrade, yet, aware, subjects, join, laptop, suspenselist, starttransition, 132, nextjs, delve, concepts, empower, harness, hands, equipping, skills, high, informed, architectural, decisions, able, role, differentiate, edge, runtime, project, requirements, streaming, parallel, sequential, caching, strategies, enhanced, reduced, social, sharing, discoverability, engagement, adrian, hajdin, 157, debugger, attempts, chaotic, optimization, trying, optimizations, found, gave, recording, poke, minutes, knows, exactly, pinpoint, bottleneck, repeat, several, regular, comes, analyze, note, speed, lighthouse, akulov, 170, related, placing, asynchronous, demonstrates, extracting, fixing, optimistic, showcased, mutations, concludes, invitation, nozzle, tanner, linsley, 2020, client, memoization, vision, determine, named, pun, builds, enable, plans, focused, ensuring, its, limited, transitioning, significant, centralized, compatible, providing, extensibility, similar, vuex, less, verbose, powerful, inspection, file, organization, rex, eduardo, san, martin, morote, solving, tree, avoiding, creating, prematurely, tesla, electric, engine, illustrate, emphasizes, trade, offs, taking, path, evaluate, approaches, creator, epicweb, epicreact, testingjavascript, router, fundamentals, accessibility, flexibility, delivers, automatic, updating, styles, features, login, session, enhance, sites, require, basic, documents, flexible, technologies, stacks, training, michael, jackson, brief, explains, comparing, elements, pure, covers, batching, context, valuable, replay, mark, erikson, spark, git, interest, skill, stellar, career, languages, expand, timeout, wait, minute, timeouts, contribution, shifting, fiber, unapproachable, devs, fair, planted, discussion, conclusion, bundle, isn, reduce, likes, killing, mentioned, indicating, middleware, runs, sounds, depend, initiates, coming, fill, initiating, passed, caring, definitely, cheers, meant, states, love, gal, overcomplicate, notes, conscious, blabbing, stop, reading, during, couple, amazing, please, office, fascinating, funny, appreciate, 2124, usual, lazy, keynote, super, plus, customize, magic, present, offline, technically, gives, visual, tangle, mind, absolutely, presentations, provide, resources, xseed, afterwards, declare, brilliantly, pausing, xstate, standard, thumbnail, click, videoref, pause, previous, escape, zushan, similarly, consider, closing, variables, indirect, extra, isolating, easily, starts, authenticate, red, entire, internally, window, undefined, conditionally, scream, inject, story, instant, initial, parent, child, clients, prefetch, subject, acts, rfc, google, kidding, shipped, important, means, tutorials, feature, prevents, unnecessary, avoids, reasons, likely, loader, hopefully, counter, subscriptions, connected, unsubscribe, local, variable, getsnapshot, snapshot, date, brilliant, fired, seeing, preact, signal, ahead, sync, changing, lots, becomes, straightforward, cause, leading, never, default, warn, view, number, sense, section, especially, ones, ooh, thankful, exist, org, header, years, ago, commonly, case, option, arise, additionally, prevent, misuses, spicy, clean, sight, extremely, disable, explanation, offscreen, lose, isfocus, refactor, consume, grab, screenshotting, being, guy, recommending, intently, subscription, stream, head, lettuce, explicitly, care, brexit, listener, resize, mouse, anymore, activities, television, matter, channel, imposing, turning, bbc, cut, person, stopped, awkward, reality, alternative, mental, model, helps, ability, tied, completely, refactoring, give, link, specify, particular, difference, refers, confusing, duration, happening, looked, saw, mount, simulating, remounting, wondering, heck, digging, threads, felt, defective, calmed, researched, surprise, tale, environments, eviction, symptoms, themselves, littered, throughout, telltale, someone, torys, simulates, remount, incorrect, lesson, decide, cast, resolve, cancel, ignored, totally, fine, ids, cancellation, mechanism, proper, others, initially, scrolled, information, current, skipping, since, sideways, agonized, developer, void, fetched, happened, fail, occur, cannot, infer, promises, return, 2015, thought, figured, failed, due, continuous, adding, comprehensive, came, admit, convenient, life, cycle, making, bulky, classes, matice, him, npm, modules, talented, yesterday, asked, 100, confident, hell, remembers, showing, shortly, enough, prime, minister, simplifies, introduction, shortened, español, distinction, usequery, speaker, jan, nicely, explained, natalia, comment, register, comments, share, include, execution, causing, additional, complexity, face, offer, methods, managing, processes, watched, typically, handled, preventing, primarily, suggesting, certain, been, presented, latest, codebase, negatively, fighting, apis, sources, honest, demystify, maintainable, apps, started, crashes, slowdowns, regressions, prod, seer, unifies, traces, replays, errors, profiles, root, fast, faster, promoted, rate, bookmark, shown, ticket, holders, english, log,
Text of the page (random words):
oms like long dependency arrays when you have complex conditionals inside of your effects if you re missing cleanup functions or if those cleanup functions themselves are conditional or you might have ad hoc state calls littered throughout the place these are all pretty telltale signs or side effects that might indicate you re probably using useeffect wrong so okay which effects then should we be using in useeffect in the new react beta documentation which i ll give a link to later they say that there s really sort of two types of effects the effects that with a capital e those effects let you specify side effects that are caused by rendering rather than by a particular event so we re going to get into the difference right now so react refers to two types of effects effects with a capital e and events so effects that you know are supposed to happen in event handlers but i think this is a little confusing so for the duration of this talk i m going to be calling them activity actions or sorry activity effects and action effects and so activity effects are something that is it s an ongoing process 5 understanding use effects and action effects 07 26 short description use effects the hook specifically is for synchronization with activity effects action effects go in event handlers or like sort of move the effect closer to the event handler to avoid re rendering and tie it to the actual event that caused the effect action effects happen outside of rendering here s an example with multiple issues using isfocused prop to focus a component which introduces indirection and the possibility of an impossible state refactoring with forward ref or imperative handle can solve these issues it s something you don t forget about while you re in the lifecycle of your component you re intently watching it so this might be a subscription or watching a live stream of a head of lettuce or something like that an action effect is something where you explicitly execute it it s fire and forget you don t care what the end result of that is like brexit so what is use effects for use effects the hook specifically is for synchronization with activity effects not with action effects but with activity effects so one example of this is for example a listener a resize a mouse move something like that where you create a handler you add that handler and you make sure to use that cleanup function to say i don t want to listen for this anymore and because activities are ongoing things it s sort of like watching television where it doesn t matter how often you turn on and off the tv the channel is still going to keep going you re not imposing any side effects by turning it on and off it s not like you turn off the tv and the bbc is like all right let s cut it this person stopped watching it doesn t work that way so where do action effects go then we know that we can t really have side effects in render and you actually sort of can but we won t get into that here we know that putting it in useeffect is awkward because david said so but what about outside the component that s an idea so where do action effects go in reality they go in event handlers or like sort of in this example we have an onsubmit and we are submitting the data directly inside that onsubmit and i m gonna show you the alternative later but the real mental model is you want to put your fire and forget your action effects as close as possible to the event that would have caused the effect and so here s how this helps with react 18 we know that when something changes our component is going to re render and if we tie that effect to rendering then react remember it has the ability to just keep re rendering that component and because you tied it to rendering it s going to just keep executing those effects which we don t really want but move the effect closer to the event handler and you avoid that problem completely because you re not tying it to render you re tying it to the actual event that caused that effect to happen so action effects happen outside of rendering all right so here s an example which actually goes through quite a few issues and i ve seen this before i ve even done this there s an isfocused prop and so this isfocused prop makes sure that when we focus a component so isfocus equals or listening for that state change and so when that state changes we are going to execute that use effect which is then going to focus the event so there s a lot of indirection going on here just in order to you know get that component to focus and also there s a possibility of an impossible state like what if you have multiple isfocused is true in short if isfocused shouldn t really be a prop but let s see how we can refactor this at least outside of use effect so instead we could use a forward ref and we could just consume that in the components where we have this input ref equals use ref and even though this is a fancy input we could use forward ref to grab that or if you really want to use imperative handle i didn t put in the slides because i don t want people screenshotting it and being like this guy s recommending use imperative handle 6 executing effects in event handlers 11 16 short description check out the declarative approach where we re saying when something happens causes the state to change and depending on which parts change this effect should be executed but only if some condition is true that s too spicy for this talk but anyway check it out we are doing the side effect directly inside of the event handler and so the result is we have a very clean component we have no use effects in sight and this is just extremely simple so when we think about this though like executing an effect directly inside of use effect it feels or sorry executing an effect directly inside the event handler it feels imperative it feels like when something happens execute this effect you know it feels a little weird feels a little side effect y and not really functional right but check out the declarative approach where we re saying when something happens causes the state to change and depending on which parts change this effect should be executed but only if some condition is true and react may execute it again for some future reason but only in strict mode which you shouldn t disable for some future reason and i ve tried to hear the explanation for this i think it s something with offscreen mode or some like every single time i hear it it s just i lose the reason why but just don t do it 7 exploring misuses of use effect 12 38 short description now let s dive into the beta react docs we ll explore the sections where people commonly misuse use effect one such case is transforming data where use memo is a better option start without use memo and only use it if performance issues arise additionally avoid using set state in use effect to prevent infinite loops another misuse is using use effect for communicating with parents which highlights indirection instead utilize props like onopen and onclose okay so now we re gonna get into the beta react docs just checking the time ooh not much time okay so beta react docs i m so thankful that these docs exist by the way so by the way if you go to reactjs org there s a nice header over here and you can go directly to the beta react docs which we had this three years ago but it s great that we have it now okay and there s a section here called you might not need an effect so we re going to go over a few of the sections not all of them because then this would be a much longer talk but yeah let s go through them one by one especially the ones that are most common to what i see people using use effect for where they shouldn t so the first one you don t need use effect for transforming data so here s an example over here where we re calculating the total of a number of items right in use effect which makes sense right whenever the items change we need to set the total guess what that s a very imperative way of thinking instead what we could do is just put it inside use memo because total is a derived value and use memo is very good for derived values but guess what you might not even need use memo honestly start without it and only if you start to notice performance problems should you start to use use memo i m saying use a lot but yeah much simpler get rid of the use effect and of course we know that putting set state in use effect it could cause a whole bunch anyway leading people to think i will never understand why the default behavior of use effect is an infinite loop i ve run into this before and the react docs warn you you shouldn t do this this is why it s because this is going to trigger a re render which is going to trigger the effect again et cetera et cetera you don t need use effect for communicating with parents this is an interesting one that really highlights the indirection that s going on we have onopen and onclose as props whenever we open something here like let s say that this is a product view we change the state and then depending on whether it s open or closed we re going to call those props 8 optimizing use effect and fetching data 14 48 short description we re doing that by putting isopen in a dependency which is going to trigger the use effect instead of use effect put it directly in the event handler you don t need use effect for subscribing to external stores use the usesyncexternalstore hook you don t need use effect for fetching data just use the framework and react query we re doing that by putting isopen in a dependency which is going to trigger the use effect you can see here we re clicking state s changing then we have an effect lots of indirection so instead get rid of the use effect put it directly in the event handler and now it becomes much more straightforward and easier to understand so now instead we are just calculating the next state because we know the next state of that is open and depending on that state directly call onopen and onclose and then you could even put it inside of a hook so all right you don t need use effect for subscribing to external stores this one is a really interesting one because it sort of goes counter to what i was just talking about it s like use effect is really good for subscriptions right well over here i m subscribing to a store api and all i m doing is getting some specific value like whether i m connected or not to the store api and then i have an unsubscribe here so we re still a little bit of an indirection here because we are setting a local state variable guess what you could actually get rid of this and use the usesyncexternalstore hook which has three parts a subscribe part where you tell it here s how to subscribe here s a function you need to call to subscribe the getsnapshot part which is this is the value that i want to get and here s how to read it from that store and a server snapshot where it s just good for ssr so you put all those three things together it s going to automatically subscribe and get you the value you need no use date no use effect it s a really brilliant hook so i do recommend that you at least try it out they say it s only for library authors but they also said like do not use or you will be fired it s only for react maintainers but we re seeing libraries use it for whatever reason like preact signal and stuff like that so go ahead and use it not that one but use sync external store all right this one is a big one you don t need use effect for fetching data like we talked about in the beginning that was one of the big reasons that we used use effect so instead of all of this that we were doing before just use the framework whatever you re using you re likely using a framework remix has a really nice loader over here get server side props this is going to be available to you directly in the component and then there s a library that hopefully most of you are using for fetching data which is react query 9 fetching data with use query 17 26 short description instead of use effects use query or swr to start fetching data as soon as possible the cache feature prevents unnecessary re fetching and avoids waterfalls remember to fetch data early and cache it but notice over here i m doing something different i m doing query clients prefetch query because the idea is that we want to start fetching as soon as possible which is a subject of a whole other talk so instead of use effects really use query next js says use swr or just use this is going to happen in the future if you re not familiar with the use hook it basically acts the same this is going to be the new upcoming way of doing suspense i think it s an rfc react might kill it they like doing the whole google thing where they kill stuff just kidding they ve shipped a lot of really great stuff but the important thing is this cache over here this cache means that whenever we try to read this we are not going to keep re fetching and re fetching i guarantee you you re going to see react tutorials where they forget about this whole cache part or they start fetching in here you re going to get waterfalls again so just make sure fetch as early as possible and cache 10 problems with fetching and use effect 18 33 short description dan discusses problems with fetching and use effect including race conditions loading spinners and chasing waterfalls avoid using use effect for initializing global singletons instead move the effect outside the component you don t need use effects for handling user events move the logic inside the event handler and abstract it to a hook and dan talks about a lot of problems with fetching and use effect first of all the race conditions that we talked about there s no instant back button you re going to see loading spinners everywhere when you try to go back because components are going to try to load again no initial html content so you re going to have even more loading spinners and you re chasing waterfalls because the parent s going to load and when that s unloading the child s going to load when that s unloading et cetera et cetera and so you want to avoid those things okay so another thing you don t need use effect for initializing global singletons so here s what i mean let s say we ve done this a lot where we execute some sort of effect right when our app starts and so we re like use effect is the right place for effects so we re calling this store api authenticate but we know that in react 18 this is going to run twice so instead we use a ref and we say hey did this already run maybe not but this is honestly sort of a red flag so i recommend you not do it so instead of using a ref we could just stick that outside but guess what why don t we just stick the entire thing outside look how simple that is a lot of you might be internally screaming this is something that dan recommended on twitter so i feel okay putting this on the screen but if you re using next you can check if type of window is un...
|
