Using @preact/SIGNALS to optimize React.js PERFORMANCE
Are you tired of slow React.js performance? Join us at the JS Fwdays Meetup in Krakow on 11.05.2023 for a talk on using @preact/SIGNALS to optimize your React.js performance.
React.js is a popular JavaScript library for building user interfaces, but as your app grows, you may encounter performance issues. @preact/SIGNALS is a tool that can help you improve the performance of your React.js app by reducing rendering times and optimizing the virtual DOM.
In this talk, we will cover the basics of @preact/SIGNALS and how it can be used to boost the performance of React.js apps. We will demonstrate real-life examples and provide practical tips for integrating @preact/SIGNALS into your existing projects.
Whether you are a beginner or an experienced developer, this talk will provide valuable insights into optimizing the performance of your React.js apps. Don’t miss this opportunity to learn from industry experts and network with fellow developers at the JS Fwdays Meetup in Krakow.
Mark your calendar for 11.05.2023 and join us for a talk on using @preact/SIGNALS to optimize React.js performance. See you there!
Hey great video, are these Signals the same as Robert Penner's back in the day with Actionscript? I think they follow the same pattern.
When I got into Javascript development, coming from an Actionscript environment, I was stunned as how callbacks were the common pattern regarding to interaction and orchestration, this was about 10 years ago or more, and now I am recalling Signals from back then. They were translated into HaXe after that, but I didn't follow with it.
I got to admit my mistake in the statement about callback at 07:07.
Thanks Dima Bildin for bringing this to my attention.
«Specifically, in this case — «it creates a function over and over again.»
Firstly, there's nothing scary about this, a new function is created for each render, it stays within this scope and the previous one gets released from memory.
Secondly, even if this bothers you, useCallback doesn't save you from this and doesn't affect it in any way. Every time the render function is called, it calls useCallback(() => increment(…)) – meaning this same function is still created and passed to useCallback (and gets released from memory just the same, only useCallback will return the first function that was passed to it, and all the new ones will just be created and forgotten). Plus, useCallback has to remember something that you passed to it, that is, it just adds one more key to its store of remembered callbacks, which overall doesn't improve performance either)
useCallback ONLY matters if the callback function is passed to a component that is wrapped in React.memo() and then it won't rerender (i.e., call its render function, we're not talking about updating the DOM) because a new instance of the function is created on each render, but in your example, it's passed to <button> which will rerender in any case (and it's fine because it's just a call to the same function)»