If you are not sure if the website you would like to visit is secure, you can verify it here. Enter the website address of the page and see parts of its content and the thumbnail images on this site. None (if any) dangerous scripts on the referenced page will be executed. Additionally, if the selected site contains subpages, you can verify it (review) in batches containing 5 pages.
favicon.ico: gitnation.com/contents/using-useeffect-effectively - Using useEffect Effectively by.

site address: gitnation.com/contents/using-useeffect-effectively

site title: Using useEffect Effectively by David Khourshid

Our opinion (on Saturday 15 August 2026 15:42:05 UTC):

GREEN status (no comments) - no comments
After content analysis of this website we propose the following hashtags:



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):
s slides com because i m too lazy to learn keynote also slides com is super easy plus you can customize it with css they have that magic move thing too it s really nice and present offline that s what i use oh yes let s talk about effects i love a you might not need concept because i m a simple gal i don t like to overcomplicate things but if i wanted to take all of this into say the real world a team a job are there any tools we could use some linting some notes a blog post any sort of resource in order to ensure we re conscious of these things good question i mean i guess you could watch my talks but then they re gonna be like oh this is just david blabbing on about use effects so i ll write a blog post about it the official react docs the beta docs honestly stop reading the old docs read the beta docs those are gonna be the resource for basically everything i talked about during this talk and they even have a couple more examples of where you should not use a use effect 13 linting rules and fetching alternatives 25 24 short description as far as linting rules just let react 18 make your app crash in development what are your thoughts on the lint rule that says not to put functions in your event handlers don t add lint rules until they become a problem when depending on arguments for your request start fetching as early as possible react rendering is not about events but rather the user or external actions usereducer and redux are state containers not meant for fetching effects with state machines indicate new states and the effects to happen so definitely read through that as far as linting rules just let react 18 make your app crash in development and be like oh why d that happen probably a use effect i feel like i know the answer to this but what are your thoughts on that lint rule that s like don t put functions in your event handlers don t put how about don t add lint rules until they actually become a problem how s that that s great cheers for that all right we have a few questions all right fetch as you render sounds good until you depend on arguments for your request what is the best approach then well think about when those arguments happen the user probably initiates it or it s coming from an outside source so for example the user might press a button might fill out a form and then when they submit a form that point where they submit a form that s when you should be initiating the request what a lot of react developers do is they ll submit a form that gets set to state or that gets passed down as a prop to a component and then the component s like oh hey i have a prop now i can read that prop and fetch data based on that prop but there is a lot of indirection there so start fetching as early as possible you re going to learn that react rendering is not an event or it s not the events that you should be caring about the user actually doing stuff or some external thing doing stuff that s what you have to focus on there s a lot of questions and i m going to sort of bundle them together about all the alternatives so isn t use reduce good for fetching or do you think we re going to use redux again or when would you use use effect without a dependency array what about use event all the uses so use event s dead you know react likes killing stuff so yeah what were the other alternatives things like all right use reducer redux etc these are state containers they re not really ways that you would fetch effects but like i mentioned you know with state machines you should be thinking about when your state changes you should have some sort of way of indicating this is a new state and these are the effects that are supposed to happen a lot of times when we think about it we re like here s a new state and then we have some middleware that runs where it s like okay maybe i ll fetch 14 discussion and conclusion 27 51 short description but i think that both of those should go together what tool did you use to visualize the state machine in your slide it is a stately ai editor did you ever think about contributing to the react docs i did contribute once their actual source code might as well be closed source great talk are your slides going to be posted online follow david on twitter at david k piano thank you david but i think that both of those should go together thank you david what tool did you use to visualize the state machine in your slide good question not a planted question i promise it is a stately ai editor it s free to use play around with it it s really pretty yeah okay one more oh actually maybe two more did you ever think about contributing to the react docs yes so i did contribute to the react docs once because they had used timeout ms that was for a very very old suspense api but i was like wait a minute it just says use timeouts in the docs i could add that little ms to the side that was my first react contribution because their actual source code might as well be closed source there s like bit shifting and all of these weird fiber stuff and i m like that is very unapproachable for any dev who does not work at meta and probably most devs who work at meta that s fair and then finally great talk are your slides now or later going to be posted online yeah cool follow david on twitter at david k piano david k piano thank you david thank you expand available in other languages en using useeffect effectively es uso efectivo de useeffect check out more articles and videos we constantly think of articles and videos that might spark git people interest skill us up or help building a stellar career a guide to react rendering behavior react advanced 2022 25 min a guide to react rendering behavior top content mark erikson replay io this transcription provides a brief guide to react rendering behavior it explains the process of rendering comparing new and old elements and the importance of pure rendering without side effects it also covers topics such as batching and double rendering optimizing rendering and using context and redux in react overall it offers valuable insights for developers looking to understand and optimize react rendering react performance deep dive react rendering building better websites with remix react summit remote edition 2021 33 min building better websites with remix top content michael jackson react training remix is a web framework built on react router that focuses on web fundamentals accessibility performance and flexibility it delivers real html and seo benefits and allows for automatic updating of meta tags and styles it provides features like login functionality session management and error handling remix is a server rendered framework that can enhance sites with javascript but doesn t require it for basic functionality it aims to create quality html driven documents and is flexible for use with different web technologies and stacks react remix frameworks don t solve problems eliminate them react advanced 2021 39 min don t solve problems eliminate them top content kent c dodds creator of epicweb dev epicreact dev testingjavascript com kent c dodds discusses the concept of problem elimination rather than just problem solving he introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely kent uses examples like tesla s electric engine and remix framework to illustrate the benefits of problem elimination he emphasizes the value of trade offs and taking the easier path as well as the need to constantly re evaluate and change approaches to eliminate problems remix best practices web development everything beyond state management in stores with pinia vue js london live 2021 34 min everything beyond state management in stores with pinia top content eduardo san martin morote vue js core team state management is not limited to complex applications and transitioning to a store offers significant benefits pinia is a centralized state management solution compatible with vue 2 and vue 3 providing advanced devtools support and extensibility with plugins the core api of pinia is similar to vuex but with a less verbose version of stores and powerful plugins pinia allows for easy state inspection error handling and testing it is recommended to create one file per store for better organization and pinia offers a more efficient performance compared to v rex state management vue pinia react react compiler understanding idiomatic react react forget react advanced 2023 33 min react compiler understanding idiomatic react react forget top content 2 authors the talk discusses react forget a compiler built at meta that aims to optimize client side react development it explores the use of memoization to improve performance and the vision of forget to automatically determine dependencies at build time forget is named with an f word pun and has the potential to optimize server builds and enable dead code elimination the team plans to make forget open source and is focused on ensuring its quality before release react build tools builders and founders react 19 react forget react query it s time to break up with your global state react summit remote edition 2020 30 min react query it s time to break up with your global state top content tanner linsley nozzle io global state management and the challenges of placing server state in global state are discussed react query is introduced as a solution for handling asynchronous server state the talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic optimistic updates with mutation are showcased along with the benefits of using react query for data fetching and mutations the future of global state management is discussed along with user feedback on react query the talk concludes with an invitation to explore react query for server state management react query state management react global state react state management workshops on related topic react performance debugging masterclass react summit 2023 170 min react performance debugging masterclass top content featured workshop ivan akulov ivan s first attempts at performance debugging were chaotic he would see a slow interaction try a random optimization see that it didn t help and keep trying other optimizations until he found the right one or gave up back then ivan didn t know how to use performance devtools well he would do a recording in chrome devtools or react profiler poke around it try clicking random things and then close it in frustration a few minutes later now ivan knows exactly where and what to look for and in this workshop ivan will teach you that too here s how this is going to work we ll take a slow app debug it using tools like chrome devtools react profiler and why did you render pinpoint the bottleneck and then repeat several times more we won t talk about the solutions in 90 of the cases it s just the ol regular usememo or memo but we ll talk about everything that comes before and learn how to analyze any react performance problem step by step note this workshop is best suited for engineers who are already familiar with how usememo and memo work but want to get better at using the performance tools around react also we ll be covering interaction performance not load speed so you won t hear a word about lighthouse react performance best practices advanced debug react debugger react performance react profiler next js for react js developers react day berlin 2023 157 min next js for react js developers top content featured workshop free adrian hajdin in this advanced next js workshop we will delve into key concepts and techniques that empower react js developers to harness the full potential of next js we will explore advanced topics and hands on practices equipping you with the skills needed to build high performance web applications and make informed architectural decisions by the end of this workshop you will be able to 1 understand the benefits of react server components and their role in building interactive server rendered react applications 2 differentiate between edge and node js runtime in next js and know when to use each based on your project s requirements 3 explore advanced server side rendering ssr techniques including streaming parallel vs sequential fetching and data synchronization 4 implement caching strategies for enhanced performance and reduced server load in next js applications 5 utilize react actions to handle complex server mutation 6 optimize your next js applications for seo social sharing and overall performance to improve discoverability and user engagement react nextjs react concurrent rendering adventures in react 18 react advanced 2021 132 min concurrent rendering adventures in react 18 top content featured workshop maurice de beijer with the release of react 18 we finally get the long awaited concurrent rendering but how is that going to affect your application what are the benefits of concurrent rendering in react what do you need to do to switch to concurrent rendering when you upgrade to react 18 and what if you don t want or can t use concurrent rendering yet there are some behavior changes you need to be aware of in this workshop we will cover all of those subjects and more join me with your laptop in this interactive workshop you will see how easy it is to switch to concurrent rendering in your react application you will learn all about concurrent rendering suspenselist the starttransition api and more react concurrent rendering react 18 react concurrent mode react suspense react hooks tips only the pros know react summit remote edition 2021 177 min react hooks tips only the pros know top content featured workshop maurice de beijer the addition of the hooks api to react was quite a major change before hooks most components had to be class based now with hooks these are often much simpler functional components hooks can be really simple to use almost deceptively simple because there are still plenty of ways you can mess up with hooks and it often turns out there are many ways where you can improve your components a better understanding of how each react hook can be used you will learn all about the pros and cons of the various hooks you will learn when to use usestate versus usereducer we will look at using usecontext efficiently you will see when to use uselayouteffect and when useeffect is better react best practices react hooks deep dive react 18 hooks react profiler introducing flashlist let s build a performant react native list all together react advanced 2022 81 min introducing flashlist let s build a performant react native list all together top content featured workshop 3 authors in this workshop you ll learn why we created flashlist at shopify and how you can use it in your code today we will show you how to take a list that is not performant in flatlist and make it performant using flashlist with minimum effort we will use tools like flipper our own benc...
Images from subpage: "gitnation.com/contents/concurrent-rendering-adventures-in-re... " Verify
Images from subpage: "gitnation.com/person/maurice_de_beijer" Verify
Images from subpage: "gitnation.com/tags/concurrent-rendering" Verify
Images from subpage: "gitnation.com/tags/react-18" Verify
Images from subpage: "gitnation.com/tags/react-concurrent-mode" Verify

Verified site has: 94 subpage(s). Do you want to verify them? Verify pages:

1-5 6-10 11-15 16-20 21-25 26-30 31-35 36-40 41-45 46-50
51-55 56-60 61-65 66-70 71-75 76-80 81-85 86-90 91-94


Top 50 hastags from of all verified websites.

Supplementary Information (add-on for SEO geeks)*- See more on header.verify-www.com

Header

HTTP/2 103
link </img/popup-promo-bg-dark.avif>; rel=preload; as=image
link </fonts/subset-GothamPro.woff2>; rel=preload; as=font
link </fonts/subset-GothamPro-Bold.woff2>; rel=preload; as=font
link <htt????/gitnation.imgix.net>; rel=preconnect; crossorigin
HTTP/2 200
content-type text/html; charset=utf-8
content-encoding gzip
etag t9cpgfwhymcr71
rndr-id 8ace705e-cae9-45ed
server cloudflare
x-nextjs-cache STALE
x-nextjs-prerender 1
x-powered-by Next.js
x-render-origin-server Render
cf-cache-status DYNAMIC
cf-ray a2b94ea05a619a7c-LHR
cache-control public, max-age=60, s-maxage=600, stale-while-revalidate=14400, stale-if-error=14400
accept-ranges bytes
age 0
date Sat, 15 Aug 2026 15:42:04 GMT
via 1.1 varnish
x-served-by cache-lcy-egml8630043-LCY
x-cache MISS
x-cache-hits 0
x-timer S1786808525.777940,VS0,VE199
vary Accept-Encoding
x-country-code FR
strict-transport-security max-age=31557600
alt-svc h3= :443 ;ma=86400,h3-29= :443 ;ma=86400,h3-27= :443 ;ma=86400
content-length 129867

Meta Tags

title="Using useEffect Effectively by David Khourshid"
charset="utf-8" data-next-head=""
name="viewport" content="width=device-width, initial-scale=1" data-next-head=""
property="og:title" content="Using useEffect Effectively by David Khourshid" data-next-head=""
name="description" content="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." data-next-head=""
property="og:description" content="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." data-next-head=""
property="og:image" content="htt????/gn-portal-og-images.vercel.app/using-useeffect-effectively?v3-1720280131729" data-next-head=""
name="twitter:card" content="summary_large_image" data-next-head=""
name="twitter:site" content="@gitnationorg" data-next-head=""
property="og:type" content="website" data-next-head=""
http-equiv="Content-Type" content="text/html; charset=utf-8"
name="format-detection" content="telephone=no"
name="sentry-trace" content="91fe87ea5e50ff864b78f70962e80eef-68079f050c9b0e1e-0"
name="baggage" content="sentry-environment=production,sentry-release=86370d72f5fdbf634c73344f05e3bb4d1ab0415e,sentry-public_key=5f1f5671236d4e53904492ace8e02e0c,sentry-trace_id=91fe87ea5e50ff864b78f70962e80eef,sentry-sampled=false,sentry-sample_rand=0.6316226162651342,sentry-sample_rate=0.05"
itemprop="position" content="1"
itemprop="position" content="2"
charset="utf-8" id="isPasted"

Load Info

page size129867
load time (s)0.278191
redirect count0
speed download467147
server IP 151.101.129.91
* all occurrences of the string "http://" have been changed to "htt???/"