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):
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 undefined or not and call it conditionally like that and if you re going to scream about testing just wrap it in a function you know you could even inject that story api do whatever you want to do you know just do it outside of the component and then the biggest one for me you don t need use effects for handling user events and so this goes to activity effects versus action effects so now we re talking about action effects so in this one we are submitting a form and we re setting all of these variables so set is loading is true set the form data to the event and so that s going to be indirect and trigger a change this is wrong what you should do is move it inside of the event handler so move it inside of submit and then you know you might need to add a whole bunch of extra logic but because you re not using use effect and you re isolating it to that event handler you could easily abstract that to a hook 11 handling effects with state machines 20 54 short description my favorite type of hook is use reducer it s a library i maintain it works similarly to redux let s consider a bigger example where we have a cool video we use three use effects to handle various actions such as playing ending and closing the video by thinking in terms of declarative effects and using a state machine we can execute effects directly on transitions my favorite type of hook looks like this where you have a state and a send and all you have to do in your components is send events this is use reducer this is x day it s a library i maintain this is redux zushan sort of works the same way yeah but so here is a bigger example i wanted to just make this cool video where it s a thumbnail but when you click it it goes full screen and then there s many ways to close it there s three use effects that are handling this so the first one we are checking is playing and so if we are playing the videoref is you know we have to play it or we have to pause it if it s not the second one we are listening for the video to end and if it s not ending then we have to set is playing to false and remember this is going to trigger some indirection it s going to trigger the state s change and then the state is going to trigger the previous effect and the same thing over here when we press the escape key again we are setting is playing to false and now we have a little bit of cleanup too so the way i like to think about these instead in terms of declarative effects is by using a state machine and no i m not going to talk about xseed in this talk but you can talk to me afterwards about it so with state machines you declare the effects that are going to execute directly on the transition and i think this is brilliantly simple so for example when we re in mini and we transition to full we re doing it on a toggle and we play the video same thing when we re going from full to mini we go from toggle and we re pausing the video and then we do the transition so if you haven t used xstate just imagine this as redux or your standard reducer imagine if you could execute effects directly inside of your reducer it s basically the same idea 12 effects and tools for real world use 22 40 short description imagine executing effects directly inside your reducer state machines are purpose built for declaratively expressing effects action effects go in state transitions executed around the same time as event handlers use effect is for synchronization activity effects go in use e...
|
