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):
nning them only when specific values change what are activity effects and action effects in react activity effects are ongoing processes watched within the component lifecycle suited for synchronization in useeffect action effects are fire and forget actions typically handled in event handlers or state transitions not in useeffect how should developers handle data fetching in react components instead of using useeffect for data fetching developers should utilize frameworks or libraries like react query or remix which offer more efficient methods for managing data fetching and state what tool does david corschied recommend for visualizing state machines david corschied recommends using the stately ai editor for visualizing state machines which is a free tool what are some common issues developers face with the useeffect hook in react common issues include infinite loops race conditions and challenges with cleanup functions react 18 also introduced double execution of effects on mounts causing additional complexity react best practices state management react hook missing dependency david khourshid 30 min 21 oct 2022 share comments sign in or register to post your comment natalia nicely explained 11 45 jan 13 2026 video summary and transcription 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 available in español uso efectivo de useeffect transcription shortened version 1 introduction to use effect 00 00 short description hello everyone my name is david corschied and i work at stately ai today we re going to talk about our favorite hook use effect and how it simplifies things compared to class components let s dive in all right hello everyone my name is david corschied and my slides will be showing up shortly i m sure oh yeah there it is david corschied i m at david k piano pretty much everywhere i m very excited to be in london again i work at stately ai where we think a lot about state logic and effects but enough about me if i keep going then this talk is going to last longer than your next prime minister so let s get on with it okay so of course i work at stately and one of our engineers matice you might have seen him he s in your npm your node modules i guarantee it he s one of the most talented developers i know yesterday he created a pr where he asked am i 100 confident in this fix hell no it s based on use effect so we re going to be talking about that today our favorite hook use effect but let s start from the beginning who remembers class components right so yeah some people really want them back so do i all right so in this example i remember that when react came out i was very excited for it i m like wow this is going to change everything and react did change everything on every single render so over here we re doing what most components do or what most react developers do which is fetch data and show it on the screen admit it that s 90 of your job but we had a nice convenient little life cycle hook component to do that in but now things are different we have use effect so i remember i learned about use effect in 2018 and i was very excited to use it because i m like wow this makes things a lot simpler so instead of making these big bulky classes we have these hooks that we can put things in read also understanding react useeffect a comprehensive guide to side effects in react 2 fetching data with use effect 01 59 short description i wanted to fetch data using new js syntax in 2018 however when i put it in use effect react yelled at me it didn t know what to do with the async await syntax so i had to use then instead even though i thought i had it figured out the next day my aws failed due to an infinite loop caused by continuous fetching i realized i needed to read the documentation and discovered the tip about using a dependency array by adding an empty array i could optimize performance and avoid infinite loops i wanted to fetch data it was 2018 so i wanted to use new js syntax and it was in effect so i put it in use effect tried this react yelled at me it said listen this async await stuff it s fancy but you cannot use it like that you have to you know we it doesn t infer that hey i don t know what to do with this because it promises that you return from use effect so we had to do things like it was 2015 and use then so i fetched some data then i set the data i m like this is simple i just put it in the use effect i get my data i m good to go right wrong guess what happened to my aws fail the next day yeah so this by the way it will keep fetching and fetching and fetching and it really won t react won t tell you that hey this is going to occur as an infinite loop all right so at this point i m like okay maybe i should read the documentation a little bit so i scrolled all the way down and so there was a tip it s just a tip you know this very crucial bit of information is a tip in the current react docs docs optimizing performance by skipping effects and so i learned that you re supposed to use this little dependency array and since this didn t really have any dependencies you just put it empty like that if you look at it sideways it sort of looks like an agonized react developer screaming into the void so yeah all right 3 handling race condition and cleanup in useeffect 03 31 short description i learned what the dependency array is for however i discovered a race condition when fetching data with different ids to handle this we need to implement a cancellation mechanism and ensure proper cleanup some developers copy paste the solution while others create custom hooks this approach worked well initially so i learned my lesson i learned what the dependency array is for and so everything was good right well now i discover that we have something called a race condition because when i fetch something with an id and then i decide you know what i m gonna fetch something with a different id if that id is cast then that promise is gonna resolve first while the first one is still going because we didn t cancel it so now we have to do the dance this is a dance that so many of you have done before and that s having this is canceled false flag or react calls it ignored in the official documentation and then you have to make sure that we haven t canceled this promise that you have to have a cleanup in there and you have to do all this so some of you just copy paste this some of you put this in a use promise or a use async custom hook which is totally fine and this worked well for a while 4 react 18 effects and correct use 04 30 short description until react 18 effects executed twice on mounts react simulates an unmount and remount many signs indicate incorrect use of useeffect react 18 s double exec in strict mode and development long dependency arrays complex conditionals missing cleanup functions conditional cleanup functions and ad hoc state calls react recommends using effects with a capital e for side effects caused by rendering there are two types of effects activity effects and action effects until react 18 where effects execute twice on mounts so when i first discovered this i didn t know it was a react 18 thing am i doing something wrong in my code what did i do did someone change something was it the torys i have no idea so what s actually happening over here so i looked it up and saw ok we mount an effect and then react is actually simulating an unmount and then react is remounting it again wondering why the heck was it doing that and so i did a lot of digging around i was looking at the second official react docs which is random twitter threads by the core maintainers and i realized that you know useeffect it felt like a defective thing i m like we really really shouldn t be using it you know and the more we use it the more we feel like this right so you know of course i calmed down a bit researched a bit more learned about how useeffect works and so the answer might surprise you it doesn t it doesn t for many effects okay it actually does work but there s many tell tale signs where you could see okay maybe i shouldn t be using a useeffect first of all react 18 s double exec that thing that it does only in strict mode and only in development environments this is an eviction notice basically when this happens and part of your app breaks it s basically react telling you you shouldn t be using this effect inside of useeffect also there s other symptoms 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 ...
|
