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):
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 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 ge...
|
