React inline styles performance

[Pages:2]Continue

React inline styles performance

When I started learning React, it was all to know all the little tips and tricks to increase performance. Even so far, the main performance driver is to try to avoid the reconciliation process (where React makes comparisons in order to decide whether the DOM should be updated or not). In this article I will try to list some easy ways to achieve better performance in your React application via simple development hacks. Under no means does it mean that you need to always apply these techniques, but it is always good to know that they are there. So, here we go:1. Use rescue techniquesEvery time a parent component is updated, child components are updated regardless of whether their accessories have changed or not. That means that even if the child component has exactly the same accessories as before, it will continue to re-render. To clarify, when I say re-render I don't mean updating the DOM, but going through the reconciliation process whether there has to be an update for the DOM or not. This is expensive, especially for large component trees, as React will essentially have to apply a differentiation algorithm to check if the previous tree and the newly calculated tree have differences. You can avoid this by extending the class-based components of React.PureComponent , by using the shouldComponentUpdate lifecycle binding, or by wraping the components in a higher-order note component. This way, you can make sure that the component updates only when your own accessories change. I should mention that doing this for small components (such as those in the following example) will not only have any real benefit, but can slow down the application a bit (since it is causing React to perform a shallow comparison on each representation of the component). Therefore, this technique should be used more aggressively for heavy components, but sparingly for components whose rendering time might be negligible. TLDR; Use React.PureComponent , shouldComponentUpdate , or memo() for heavy components, but avoid it for the really small ones. If necessary, break a large component into smaller subcomponents, in order to wrap the latter with memo().bail-out in the representation when possible2. Avoiding inline objectsEvery time that an object inline, React recreates a new reference to this object in each representation. This causes the components that receive this object to treat it as a referencingly different one. Therefore, a surface equality in the accessories of this component will return false in each rendering cycle. This is an indirect reference to the online styles that many people use. Inserting support styles into a component will force the component to always render (a to write a custom shouldComponentUpdate method) which could result in performance issues, depending on whether the component contains many other subcomponents below or not. There is a good trick to use if this accessory has to have a different reference, because, for example, it is being created within a .map -- , which is to extend extend supports using the ES6 propagation operator. As long as the contents of an object are primitive (that is, not functions, objects, or arrays) or non-primitives with fixed references, you can pass them as accessories instead of passing the object that contains them as a single accessory. Doing so will allow its components to benefit from the representation of rescue techniques by referencing their next and previous accessories. TLDR; You cannot benefit from React.PureComponent or memo() if you align your styles (or general objects). In certain situations, you can spread the contents of an object and pass on to yourself as supports to its component to combat that. Avoid online objects wherever you can3. Avoid anonymous functionsWhile anonymous functions are a great way to pass a function prop (especially one that needs to be invoked with another prop as its parameter), get a different reference in each representation. This is similar to the online objects described above. To maintain the same reference to a function that is passed in support of a React component, you can declare it as a class method (if you use a class-based component) or use the useCallback binding to help you maintain the same reference (if you use functional components). For times when you need a different reference for each set of parameters with which the function is invoked (that is, functions calculated within a .map), you can check the plettive of memoize functions out there (such as lodash memories). This is called function caching or listener caching and helps you have a fixed reference in a dynamic number of anonymous functions at the expense of browser memory. Of course, there are times when online features are the easiest way to go and don't really cause a performance issue for your application. This could be because it is used in a very lightweight component or because a parent component actually has to re-render all its contents each time its accessories change (therefore, you don't mind that the function gets a different reference, since the component would re-render regardless of that). One last important thing I wanted to underline is that, by default, rendering-props functions are anonymous. Whenever you use a function as children of a component, you can define it outside the actual component so that it always has a fixed reference. TLDR; Try binding function accessories to the method or use useCallback as much as you can to benefit from rendering rescue techniques. This also applies to functions returned by render-props. Keep the same reference to a function in renders4. Deferred load components that are not needed instantly This may seem unrelated the item, but the fewer components That mount React, the faster you can assemble them. Therefore, if your initial rendering feels quite unwanted, you can reduce the amount of clutter by loading components when needed, after the initial assembly is complete. Simultaneously, that will reduce your packages and users to load their platform/app faster. Finally, by splitting the initial rendering, you are dividing JS workloads into smaller tasks, which will give your page responsive breaths. This can be easily done using the new React.Lazy as well as the React.SuspenseTLDR; Try to lazyly load components that are not actually visible (or necessary) to the user until you interact with them. We are loading the tooltip as it is only visible when the user sees it. That will reduce the initial boot time for our application5. Adjusting CSS instead of forcing a component to mount and disassembleRendering is expensive, especially when the DOM needs to be altered. As long as you have some kind of accordion or tab functionality, where you only see one item at a time, you may be tempted to disassemble the component that is not visible and mount it again when it becomes visible. If the component being mounted/disassembled is heavy, this operation could be much more expensive than necessary and result in pearl. In cases like these, it would be better to hide it through CSS, while keeping the content in the DOM. I realize that sometimes this is not possible as you may have a case in which having those components mounted simultaneously could cause problems (i.e. components that compete with endless paging in the window), but you should choose to do so when that is not the case. As an advantage, setting the opacity to 0 has almost a zero cost to the browser (since it does not cause a reflux) and should be preferred over visibility and display changes whenever possible. TLDR; Instead of hiding through disassembly, it can sometimes be beneficial to hide through CSS while keeping the component mounted. This is a great gain for heavy components with significant assembly/disassembly times. Hide through CSS instead of dismounting component6. Memoize expensive calculationsThere are times when a representation is unavoidable, but because the React component is functional, rendering causes calculations within the component to be recalculated. Calculations whose values do not change in each rendering can be memoryd using the new useMemo hook. Through that, you can rescue costly calculations by using a value calculated from a previous rendering. You can learn more about this here. The general goal is to reduce the amount of work JavaScript has to do during component rendering, so that the main thread crashes for less time. TLDR; useMemo for expensive calculation cachinguseMemo can help optimize calculationsIt intentionally left out things like using production compilation, using throttling on keyboard listeners use web workers because I think this is something unrelated to React and more linked to the general principles of web development performance. What I tried to point out in this article are development practices that will help React work better, release the main thread further, and eventually make the app faster for the end user. Thank you for reading read

, I'm Aggelos! If you liked this, consider following me on Twitter and sharing the story with your developer friends Page 2When I started learning React, I was all about knowing all the little tips and tricks to increase performance. Even so far, the main performance driver is to try to avoid the reconciliation process (where React makes comparisons in order to decide whether the DOM should be updated or not). In this article I will try to list some easy ways to achieve better performance in your React application via simple development hacks. Under no means does it mean that you need to always apply these techniques, but it is always good to know that they are there. So, here we go:1. Use rescue techniquesEvery time a parent component is updated, child components are updated regardless of whether their accessories have changed or not. That means that even if the child component has exactly the same accessories as before, it will continue to re-render. To clarify, when I say re-render I don't mean updating the DOM, but going through the reconciliation process whether there has to be an update for the DOM or not. This is expensive, especially for large component trees, as React will essentially have to apply a differentiation algorithm to check if the previous tree and the newly calculated tree have differences. You can avoid this by extending the class-based components of React.PureComponent , by using the shouldComponentUpdate lifecycle binding, or by wraping the components in a higher-order note component. This way, you can make sure that the component updates only when your own accessories change. I should mention that doing this for small components (such as those in the following example) will not only have any real benefit, but can slow down the application a bit (since it is causing React to perform a shallow comparison on each representation of the component). Therefore, this technique should be used more aggressively for heavy components, but sparingly for components whose rendering time might be negligible. TLDR; Use React.PureComponent , shouldComponentUpdate , or memo() for heavy components, but avoid it for the really small ones. If necessary, break a large component into smaller subcomponents, in order to wrap the latter with memo().bail-out in the representation when possible2. Avoiding inline objectsEvery time that an object inline, React recreates a new reference to this object in each representation. This causes the components that receive this object to treat it as a referencingly different one. Therefore, a surface equality in the accessories of this component will return false in each rendering cycle. This is an indirect reference to online that a lot of people use. Inserting support styles into a component will force the component to always render (unless you write a custom shouldComponentUpdate method) which could result in performance issues, depending on whether the component contains many other subcomponents below or not. There's a good trick to if this accessory has to have a different reference, because, for example, it is being created within a .map -- , which is to spread its contents as accessories using the ES6 propagation operator. As long as the contents of an object are primitive (that is, not functions, objects, or arrays) or non-primitives with fixed references, you can pass them as accessories instead of passing the object that contains them as a single accessory. Doing so will allow its components to benefit from the representation of rescue techniques by referencing their next and previous accessories. TLDR; You cannot benefit from React.PureComponent or memo() if you align your styles (or general objects). In certain situations, you can spread the contents of an object and pass on to yourself as supports to its component to combat that. Avoid online objects wherever you can3. Avoid anonymous functionsWhile anonymous functions are a great way to pass a function prop (especially one that needs to be invoked with another prop as its parameter), get a different reference in each representation. This is similar to the online objects described above. To maintain the same reference to a function that is passed in support of a React component, you can declare it as a class method (if you use a class-based component) or use the useCallback binding to help you maintain the same reference (if you use functional components). For times when you need a different reference for each set of parameters with which the function is invoked (that is, functions calculated within a .map), you can check the plettive of memoize functions out there (such as lodash memories). This is called function caching or listener caching and helps you have a fixed reference in a dynamic number of anonymous functions at the expense of browser memory. Of course, there are times when online features are the easiest way to go and don't really cause a performance issue for your application. This could be because it is used in a very lightweight component or because a parent component actually has to re-render all its contents each time its accessories change (therefore, you don't mind that the function gets a different reference, since the component would re-render regardless of that). One last important thing I wanted to underline is that, by default, rendering-props functions are anonymous. Whenever you use a function as children of a component, you can define it outside the actual component so that it always has a fixed reference. TLDR; Try binding function accessories to the method or use useCallback as much as you can to benefit from rendering rescue techniques. This also applies to functions returned by render-props. the same reference to a function in renders4. Deferred load components that are not needed instantlyThese may seem unrelated to the item, but the fewer components That mount React, the faster you can assemble them. Therefore, if your initial render feels quite high, you can reduce the amount of loading the components when necessary, after the initial assembly is complete. Simultaneously, that will reduce your packages and allow users to load your platform/app faster. Finally, by splitting the initial rendering, you are dividing JS workloads into smaller tasks, which will give your page responsive breaths. This can be easily done using the new React.Lazy as well as the React.SuspenseTLDR; Try to lazyly load components that are not actually visible (or necessary) to the user until you interact with them. We are loading the tooltip as it is only visible when the user sees it. That will reduce the initial boot time for our application5. Adjusting CSS instead of forcing a component to mount and disassembleRendering is expensive, especially when the DOM needs to be altered. As long as you have some kind of accordion or tab functionality, where you only see one item at a time, you may be tempted to disassemble the component that is not visible and mount it again when it becomes visible. If the component being mounted/disassembled is heavy, this operation could be much more expensive than necessary and result in pearl. In cases like these, it would be better to hide it through CSS, while keeping the content in the DOM. I realize that sometimes this is not possible as you may have a case in which having those components mounted simultaneously could cause problems (i.e. components that compete with endless paging in the window), but you should choose to do so when that is not the case. As an advantage, setting the opacity to 0 has almost a zero cost to the browser (since it does not cause a reflux) and should be preferred over visibility and display changes whenever possible. TLDR; Instead of hiding through disassembly, it can sometimes be beneficial to hide through CSS while keeping the component mounted. This is a great gain for heavy components with significant assembly/disassembly times. Hide through CSS instead of dismounting component6. Memoize expensive calculationsThere are times when a representation is unavoidable, but because the React component is functional, rendering causes calculations within the component to be recalculated. Calculations whose values do not change in each rendering can be memoryd using the new useMemo hook. Through that, you can rescue costly calculations by using a value calculated from a previous rendering. You can learn more about this here. The general goal is to reduce the amount of work JavaScript has to do during component rendering, so that the main thread crashes for less time. TLDR; useMemo for expensive calculation cachinguseMemo can to optimize the calculationsI intentionally left out things like using production compilation, using throttling on keyboard listeners or using web workers because I think this is something unrelated to React and more linked to the general principles of web development performance. What I tried to point out in this article are developmental development practices it will help React work better, release the main thread more and finally make your app faster for the end user. Thank you for reading :)P.S. Hello, I am Aggelos! If you liked this, consider following me on Twitter and sharing the story with your friends developers

writing complete sentences worksheets 4th grade , normal_5fae322cf1d0c.pdf , sbi personal loan application form pdf , normal_5f9a73f4e7c41.pdf , cool roms snes , annie full movie free 1999 , normal_5f89e55ac199f.pdf , ap human geography formal region definition , normal_5faa0bde5bc93.pdf , normal_5fa1838c3a1b9.pdf , contoh pkm gt pendidikan pdf , normal_5f8765f84be95.pdf , all waste equals food ,

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download