Meta tags:
description=This Talk discusses rendering patterns on the web, including the use of React and the concept of memoization. It explores the idea of using signals to change data without a full re-render and how frameworks like SolidJS, Vue, Svelte, and Angular are adopting signals. The React team is developing React for Get, a compiler that provides auto-memoization to reduce unnecessary re-renders. Different frameworks have their own ways of using signals, such as shallow ref or ref in Vue, use signal in Quick, and defining and accessing signals in Angular and Svelte.;

Headings (most frequently used words):

rendering, patterns, to, on, the, and, in, understanding, faq, comments, introduction, web, signals, their, usage, frameworks, check, out, more, articles, videos, workshops, related, topic, subscribe, top, dev, conferences, available, other, languages,

Text of the page (most frequently used words):
and (155), the (134), react (94), that (57), you (46), with (41), for (39), #patterns (37), can (32), are (29), more (28), signals (27), this (23), rendering (23), #frameworks (20), data (19), what (19), 2026 (18), vue (17), like (17), have (16), using (16), changes (16), learn (15), but (15), dom (15), all (14), code (14), new (14), use (14), components (13), component (13), then (13), query (12), state (11), will (11), min (11), their (11), prop (11), memoization (11), top (10), not (10), best (10), practices (10), web (10), svelte (10), api (10), content (10), fine (10), based (10), routing (10), going (10), change (10), atila (10), your (9), about (9), javascript (9), need (9), workshop (9), angular (9), way (9), other (9), how (9), developer (9), also (9), talk (9), signal (9), reactivity (9), 2027 (8), summit (8), node (8), understanding (8), experience (8), different (8), them (8), virtual (8), berlin (7), get (7), which (7), when (7), native (7), trpc (7), grained (7), actually (7), ref (7), props (7), london (6), advanced (6), adopting (6), from (6), performance (6), out (6), very (6), managing (6), provider (6), child (6), end (6), full (6), control (6), one (6), slots (6), auto (6), there (6), essentially (6), some (6), bunch (6), idea (6), render (6), may (5), day (5), next (5), work (5), server (5), such (5), applications (5), allows (5), team (5), pinia (5), into (5), provides (5), 2023 (5), composition (5), let (5), value (5), compiler (5), because (5), everything (5), only (5), find (5), rendered (5), context (5), fasina (5), support (4), updates (4), jsnation (4), our (4), management (4), people (4), main (4), available (4), requests (4), problems (4), developers (4), states (4), make (4), including (4), made (4), case (4), eslint (4), improving (4), tool (4), has (4), apps (4), was (4), without (4), thinking (4), system (4), provide (4), had (4), ways (4), shallow (4), define (4), vdom (4), requires (4), solidjs (4), came (4), things (4), they (4), renders (4), gitnation (3), feedback (3), faq (3), tech (3), conferences (3), sign (3), coding (3), dec (3), york (3), nov (3), events (3), engineer (3), workshops (3), design (3), frontend (3), typescript (3), development (3), articles (3), already (3), first (3), fetching (3), over (3), years (3), however (3), user (3), should (3), caching (3), these (3), 2022 (3), used (3), create (3), scalable (3), pattern (3), works (3), participants (3), real (3), world (3), 2024 (3), solving (3), time (3), help (3), problem (3), topic (3), offers (3), type (3), flexibility (3), accessing (3), fast (3), introduces (3), address (3), solve (3), backend (3), making (3), example (3), defining (3), file (3), towards (3), think (3), entendiendo (3), los (3), patrones (3), renderización (3), short (3), model (3), where (3), quick (3), grain (3), little (3), bit (3), than (3), doing (3), were (3), quic (3), happen (3), ideas (3), ensuring (3), abstracting (3), batch (3), parent (3), memoized (3), handy (3), unnecessary (3), fassina (3), nation (2), stats (2), amsterdam (2), singapore (2), apr (2), asia (2), oct (2), edition (2), library (2), authors (2), core (2), teams (2), subscribe (2), upcoming (2), deal (2), talks (2), free (2), conference (2), systems (2), hooks (2), fullstack (2), quality (2), builders (2), founders (2), popular (2), multipass (2), nature (2), powerful (2), scenarios (2), process (2), done (2), either (2), covered (2), single (2), setup (2), resources (2), concurrency (2), strength (2), bull (2), bullmq (2), changed (2), introduced (2), request (2), presented (2), client (2), result (2), hard (2), combining (2), most (2), would (2), sure (2), git (2), compound (2), functions (2), portals (2), write (2), efficient (2), maintainable (2), each (2), examples (2), learning (2), adrian (2), hajdin (2), featured (2), simple (2), essential (2), hands (2), exercises (2), organizing (2), common (2), challenges (2), designing (2), architectures (2), gain (2), introduction (2), creation (2), deep (2), improve (2), collaboration (2), communication (2), career (2), master (2), constantly (2), flat (2), config (2), complex (2), tree (2), been (2), customization (2), languages (2), transition (2), easy (2), pinnia (2), solution (2), splitting (2), approaches (2), methods (2), mastery (2), proven (2), today (2), rfc (2), apis (2), previous (2), inferred (2), same (2), queries (2), stack (2), typesafe (2), manager (2), manage (2), stale (2), working (2), brings (2), app (2), router (2), performant (2), beyond (2), videos (2), check (2), happened (2), right (2), better (2), describe (2), stuff (2), look (2), come (2), chat (2), see (2), youtube (2), set (2), access (2), getters (2), setters (2), function (2), getter (2), well (2), talking (2), trade (2), offs (2), less (2), resilient (2), care (2), order (2), choose (2), evaluating (2), instead (2), batching (2), logic (2), needing (2), whole (2), uses (2), notifying (2), part (2), own (2), description (2), slow (2), together (2), gets (2), seen (2), times (2), happens (2), nice (2), renderings (2), challenge (2), hello (2), neighborland (2), here (2), who (2), devrel (2), crab (2), nebula (2), google (2), expert (2), networks (2), platform (2), concept (2), leading (2), developing (2), version (2), transcription (2), forget (2), aims (2), started (2), sentry (2), october (2), online (2), rights, reserved, community, conduct, privacy, policy, terms, conditions, legal, rss, feeds, assistance, promote, product, contact, careers, company, nyc, want, sponsor, techlead, conf, orgs, grow, depth, leader, insights, experts, companies, dev, follow, miss, discounted, tickets, newsletter, testing, css, tags, mentors, discover, menu, architecture, concurrent, often, push, several, reasons, explore, few, cleverly, pushed, another, resolve, once, queue, distribute, workloads, identify, cpu, intensive, perfectly, tweak, worker, match, throughput, congress, rise, websites, built, modern, dynamic, perform, multiple, populate, website, fresh, submit, paradigm, shift, pending, succeeds, fails, meaningful, comprise, syncing, require, solutions, coded, quickly, hand, codebase, extend, maintain, cover, handle, cancellation, implementing, layer, prerequisites, familiar, usestate, useeffect, etc, along, editor, npm, installed, machine, thomas, findlay, 206, widely, hocs, cleaner, overview, viewers, key, readable, introduce, explain, demonstrate, practical, session, solid, projects, goalshocs, modularity, maintainability, application, during, review, every, know, through, interactive, discussions, attendees, deepen, newfound, confidence, ability, high, stands, test, points, patterns2, foundational, patterns3, object, patterns4, behavioral, patterns5, architectural, patterns6, studies, enhance, skills, readability, within, accelerate, growth, opportunities, advancement, software, industry, 145, related, simplicity, imports, simplifies, structure, shared, configs, five, generation, maximizing, formatter, mode, providing, options, supports, integrated, prettier, migrating, challenging, compatible, packages, tools, assist, nuxt, vite, member, anthony, lighter, modular, offering, consistent, intuitive, encourages, manageable, domains, inferences, debugging, clarity, mutating, option, stores, features, patch, reset, onaction, comprehensive, courses, adam, jahr, snots, configuration, lead, uncontrolled, cases, wrong, created, limitations, createhost, createslot, enable, flexible, styling, structures, browser, revolut, neo, nie, alex, toolkit, safe, easily, completion, endpoints, adopted, incrementally, showcases, database, validators, types, retrieval, prisma, orm, creator, alexander, johansson, 2021, dependent, asian, helps, keep, date, agent, life, cycles, efficiently, subscriptions, adjusting, behavior, dependencies, important, aspects, url, zustand, filters, maintainer, dominik, dorfmeister, between, environments, primitives, disadvantages, multipage, while, maintaining, navigation, involves, loading, pre, parts, screen, experiences, remix, moving, converging, senior, advocate, vercel, delba, oliveira, might, spark, interest, skill, building, stellar, recap, pretty, good, before, now, lot, direction, recommend, thank, much, please, around, just, wrap, countout, turn, update, setter, disingenuous, tossing, aware, updating, respond, helpers, ensure, great, anyway, takeaway, lunch, understand, looking, landscape, said, bring, back, specifically, line, forward, couple, speak, graph, representative, somewhere, base, touch, goes, decoupling, exactly, observer, capable, track, whenever, responsible, allow, awareness, chosen, exploring, usage, cool, declarative, unidirection, flow, consistency, removing, appending, elements, expensive, action, concile, add, put, abstract, away, gives, depends, don, stop, tracking, lives, defined, talked, nothing, inclined, why, stepping, landmine, entire, mind, besides, memorization, means, any, local, encapsulate, contain, afford, therefore, mental, becomes, easier, reason, especially, coming, big, computations, opinion, thing, actual, optimization, say, open, granular, name, those, got, shortcuts, naming, discuss, potential, issues, reducing, exploration, alternative, shortened, español, discusses, explores, reduce, video, summary, post, comment, register, comments, share, custom, implement, approach, codebases, decouples, allowing, refers, technique, avoid, enforce, depend, manipulation, reconciled, applied, does, aim, focusing, him, various, his, latest, exploded, popularity, thanks, unrivaled, reconciliation, could, offer, grew, pushing, boundaries, achieve, resumability, table, crashes, slowdowns, regressions, prod, seer, unifies, traces, replays, errors, profiles, root, causes, breaks, fix, faster, promoted, rate, bookmark, event, diving, shown, ticket, holders, crabnebula, english, log,

Text of the page (random words):
llow ref or ref in vue use signal in quick and defining and accessing signals in angular and svelte available in español entendiendo los patrones de renderización transcription shortened version 1 introduction to rendering patterns on the web 00 00 short description hello react neighborland today i will discuss rendering patterns on the web including the use of react and the concept of memoization react introduced the idea of abstracting the dom and using a virtual dom to batch changes and improve performance however when using a context provider all child components are re rendered leading to potential performance issues to address this the react team is developing react for get a compiler that provides auto memoization this allows components to be memoized based on the props they use reducing unnecessary re renders and improving performance memoization however is not fine grained reactivity leading to the exploration of alternative ideas to challenge the virtual dom hello react neighborland we re here to talk about rendering patterns on the web so first of all who am i my name is atila fasina and i m a devrel engineer at crab nebula i m also a google developer expert and you can find me on each one of those networks over there i have a handy i got a handy some handy shortcuts for you because naming things on the web are hard and you can also find me right here on this platform at atila io so let s talk about rendering things on the web first there was react with a bunch of very cool ideas like using the ui as a function of the state and with that came declarative ui rendering props unidirection flow and but ensuring consistency can make the dom slow because removing and re appending elements to the dom is a very expensive action so react and other frameworks had the idea of abstracting the dom and then we can batch all the changes and then re concile the changes and add everything together in one go so with that we have this rendering model where you can put together all the changes in a batch and we abstract the dom away in a virtual dom and that gives us this tree of components based on the data that they have so essentially in this case you have the parent component with props a and b but then if prop a changes everything that depends on a is also going to change but we don t stop over there because there s no way of tracking in the virtual dom what are the things that change so everything that actually is a child of where the prop a lives and is defined gets re rendered as well and if you re a react developer which i think most of you are you ve seen that a bunch of times you ve talked about that bunch of times and nothing like that is new in my experience what gets new is when we have a context provider in this case and then we are inclined to think that if we change a prop in a context provider only the components that use that prop are going to re render but essentially what happens is that everything that s a child of that component provider changes and that s why in my experience i ve seen a bunch of people stepping on the landmine because you end up re rendering your entire app with a single prop change so with that in mind the react team is working on this compiler which is react for get which is besides ensuring a bunch of nice best practices it s also going to provide auto memorization what is that what that means is that components are going to be memoized based on the props that they use so if a component uses prop a it s going to be memoized in order to only render if prop a changes and then if it s not using any prop only local states not going to be rendered based on other changes and for props b and so on so that can encapsulate the re renders and contain them that s a very nice idea and by doing that it can afford some renderings to not actually happen and therefore the mental model becomes a little bit easier to reason about when you re talking especially to people coming into react but essentially the idea of memoization is for big computations so the auto memoization part is more in my opinion a dx thing than an actual change to a performance optimization to that we also need to say that memoization is actually not fine grained reactivity and with that we open the way of going a little bit more granular so some ideas came up to challenge the vdom 2 signals and their usage in frameworks 05 11 short description instead of re rendering the whole component signals allow you to change the data without needing a full re render frameworks like solidjs vue svelte and angular are evaluating or adopting signals fine grain reactivity requires more control and awareness of data updates understanding the chosen tool is essential different frameworks have their own ways of using signals such as shallow ref or ref in vue use signal in quick and defining and accessing signals in angular and svelte developers are exploring better ways to describe ui with signals come chat with me on x or find me on youtube for example instead of rendering and batching the changes and re rendering a new idea came on if you render things you can touch only what you changed so then that essentially goes into decoupling the rendering logic from the data and that s exactly what signals are about you can change the data without needing to re render your whole component it uses the observer pattern which essentially the data is capable of notifying you when changes happen your rendering system can track if the changes happen and then whenever you re rendering the part that s responsible for your ui can then get the new value in this case so looking into our landscape of frameworks what then happened is solidjs came and said oh i like signals let s bring them back and all the other frameworks were more towards vdom some of them like svelte and vue more specifically were doing some other stuff that were more in line with what signals are and fast forward a couple of years all the frameworks are actually evaluating or adopting signals as we speak so this graph is actually very representative of like vue 3 and svelte 5 but quic and angular already have signals somewhere in their code base but then i would be disingenuous by not talking about the trade offs one of them is that fine grain reactivity is a little bit less resilient than the vdom because it requires you to have more control and it requires some care on not tossing out everything and then doing it so if you re going to go fine grain you need to be more aware of how your data is updating and making sure that your component can respond also frameworks like solidjs has a bunch of helpers that can help you ensure this reactivity in order to provide a great developer experience but anyway the takeaway of my talk is that there s actually no free lunch you may choose vdom you may choose signals but in the end of the day you need to understand the tool you re using and just so you can wrap up let s have a look about how signals are used on different frameworks like for example vue you have the shallow ref or ref where you can define them in quick you have the use signal and then you can set up you can change the value like that and you can access the value with the countout value and essentially the compiler is going to turn them into getters and setters like signals need to for angular you define a signal like this and you can either set it or update the signal based on the previous value and you can access the signal by a function getter for svelte you define a signal and you can create a getter and you can create a setter for that signal as well so to recap our short talk what happened is that we had a model that was pretty good for what we had before with react and the virtual dom and all the other frameworks using them right now a lot of developers are actually thinking there are better ways to describe the ui with signals and stuff and so more frameworks are going towards that direction and i do recommend you to have a look at that and that was all i had for you so thank you very much please come around and let s chat on x or see me on youtube available in other languages en understanding rendering patterns es entendiendo los patrones de renderización 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 routing in react 18 and beyond react summit 2022 20 min routing in react 18 and beyond top content delba de oliveira senior developer advocate vercel routing in react 18 brings a native app like user experience and allows applications to transition between different environments react router and next js have different approaches to routing with react router using component based routing and next js using file system based routing react server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience improving navigation and routing in react involves including loading ui pre rendering parts of the screen and using server components for more performant experiences next js and remix are moving towards a converging solution by combining component based routing with file system routing react next js patterns react file based routing thinking in react query react summit 2023 22 min thinking in react query top content dominik dorfmeister react query maintainer react query is not a data fetching library but an asian state manager it helps keep data up to date and manage agent life cycles efficiently react query provides fine grained subscriptions and allows for adjusting stale time to control data fetching behavior defining stale time and managing dependencies are important aspects of working with react query using the url as a state manager and zustand for managing filters in react query can be powerful react react query state management patterns builders and founders react query best practices react query caching react query dependent queries react state management thinking in react full stack typesafe react native apps with trpc io react advanced 2021 6 min full stack typesafe react native apps with trpc io top content alexander johansson the creator of trpc alex introduces trpc a toolkit for making end to end type safe apis easily with auto completion of api endpoints and inferred data from backend to frontend trpc works the same way in react native and can be adopted incrementally the example showcases backend communication with a database using queries and validators with types inferred to the frontend and data retrieval done using prisma orm react typescript developer experience backend patterns react native fullstack trpc trpc with react native react slots a new way of composition react advanced 2022 21 min react slots a new way of composition top content neo nie revolut today s talk introduces react snots a new way of composition for design systems the configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns react slots rfc was created to address the limitations of react s support for web components and slots it introduces createhost and createslot apis to enable component composition and solve previous problems react slots rfc allows for flexible component styling and the creation of complex structures without rendering them to the browser react patterns react 18 react composition react slots proven pinia patterns vue js london 2023 20 min proven pinia patterns top content adam jahr vue mastery pinnia is a lighter more modular state management solution for vue apps offering consistent patterns typescript support and an intuitive developer experience pinia encourages splitting state into manageable domains improving code splitting type inferences team collaboration and debugging clarity pinia provides flexibility in accessing and mutating state with different approaches for option and setup stores it also offers features like patch reset and onaction methods vue mastery offers comprehensive pinnia courses and resources for fast learning vue 3 design patterns pinia react eslint one for all made easy jsnation 2024 27 min eslint one for all made easy top content anthony fu vue nuxt and vite core team member eslint is a popular and constantly improving tool that offers full control and simplicity in javascript with native imports the new flat config simplifies the complex tree structure of shared configs and has been in the works for five years it allows for customization and type generation maximizing flexibility eslint can be used as a formatter and a tool for code mode providing more control and customization options it also supports other languages and can be integrated with prettier migrating to the flat config may be challenging but compatible packages and tools are available to assist with the transition patterns workshops on related topic master javascript patterns jsnation 2024 145 min master javascript patterns top content featured workshop adrian hajdin during this workshop participants will review the essential javascript patterns that every developer should know through hands on exercises real world examples and interactive discussions attendees will deepen their understanding of best practices for organizing code solving common challenges and designing scalable architectures by the end of the workshop participants will gain newfound confidence in their ability to write high quality javascript code that stands the test of time points covered 1 introduction to javascript patterns2 foundational patterns3 object creation patterns4 behavioral patterns5 architectural patterns6 hands on exercises and case studies how it will help developers gain a deep understanding of javascript patterns and their applications in real world scenarios learn best practices for organizing code solving common challenges and designing scalable architectures enhance problem solving skills and code readability improve collaboration and communication within development teams accelerate career growth and opportunities for advancement in the software industry best practices javascript patterns react patterns made simple react day berlin 2024 62 min react patterns made simple top content featured workshop adrian hajdin learn widely used react patterns including hocs compound components provider patterns functions as child and portals to write cleaner more efficient code and create scalable maintainable applications overview in this workshop viewers will learn about key react patterns that can make their code more efficient readable and maintainable we ll introduce each pattern explain how it works and demonstrate practical examples by the end of the session participants will have a solid understanding of how to use these patterns in their projects learning goalshocs compound components provider patterns functions as child portals modularity maintainability real world applicatio...