The document discusses various techniques for optimizing web performance and React applications. It covers topics like loading time, rendering time, dev tools, React tools, the latest features in React 17 and 18 like the new root API and startTransition API. It also discusses best practices for performance optimization in React like using pure components, React.memo, lazy loading, throttling events, debouncing events, and virtualization. Code snippets are provided as examples for some of these techniques.
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://azconf.dev/
Node JS Express: Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code.
This presentation includes challenges in testing, levels of testing, best practices and policies, Test Drive Design(TDD),
Behavioral Driven Design (BDD Testing), TDD v/s BDD
Real World AngularJS recipes: beyond TodoMVCCarlo Bonamico
Codemotion Rome 2015 Talk with Sonia Pini
You got captured by Angular power and simplicity, and have chosen it for your next project (or you are thinking about it). Creating a prototype with Data Binding, scopes and MVVM was relatively quick and easy. But what do you need to effectively complete and bring a complex application in Production? We will discuss practical recipes from our real world experiences for choosing between ES5, ES6 and TypeScript, designing a modular, event-driven application structure, creating or selecting components and directives, implementing authentication, managing errors and logging, testing and packaging.
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://azconf.dev/
Node JS Express: Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code.
This presentation includes challenges in testing, levels of testing, best practices and policies, Test Drive Design(TDD),
Behavioral Driven Design (BDD Testing), TDD v/s BDD
Real World AngularJS recipes: beyond TodoMVCCarlo Bonamico
Codemotion Rome 2015 Talk with Sonia Pini
You got captured by Angular power and simplicity, and have chosen it for your next project (or you are thinking about it). Creating a prototype with Data Binding, scopes and MVVM was relatively quick and easy. But what do you need to effectively complete and bring a complex application in Production? We will discuss practical recipes from our real world experiences for choosing between ES5, ES6 and TypeScript, designing a modular, event-driven application structure, creating or selecting components and directives, implementing authentication, managing errors and logging, testing and packaging.
Node js is said to be an open source. It is the cross-platform JavaScript runtime to developing different types of applications and tools. Thus the best node js course js is not a JavaScript framework with its many of the core modules which are mainly written in the JavaScript and even the developers to writing a new module. It is also primarily used to develop the input and output web applications like single page applications, video streaming sites with other web applications.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
The curious Life of JavaScript - Talk at SI-SE 2015jbandi
My talk about the life of JavaScript, from birth to today.
I went trough the demos and code examples very quickly, rather as a teaser to show how modern JavaScript development might look.
If you are interested in a deep dive into the topic of modern JavaScript development, HTML5, ES6, AngularJS, React, Gulp, Grunt etc, please consider my courses: http://www.ivorycode.com/#schulung
http://www.learntek.org/product/react-js-training/
http://www.learntek.org
Learntek is global online training provider on Big Data Analytics, Hadoop, Machine Learning, Deep Learning, IOT, AI, Cloud Technology, DEVOPS, Digital Marketing and other IT and Management courses. We are dedicated to designing, developing and implementing training programs for students, corporate employees and business professional.
Replace Angular with React. Make the move from the MEAN stack to the powerful MERN Stack!
Come and learn about the MERN stack. No, that isn't a typo. The MERN stack is Mongo, Express, and Node, with React instead of Angular. While both React and Angular are remarkable JavaScript technologies, React comes with less baggage. There is no TypeScript, no annotations, no bossy framework telling you how to do everything.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
Node js is said to be an open source. It is the cross-platform JavaScript runtime to developing different types of applications and tools. Thus the best node js course js is not a JavaScript framework with its many of the core modules which are mainly written in the JavaScript and even the developers to writing a new module. It is also primarily used to develop the input and output web applications like single page applications, video streaming sites with other web applications.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
The curious Life of JavaScript - Talk at SI-SE 2015jbandi
My talk about the life of JavaScript, from birth to today.
I went trough the demos and code examples very quickly, rather as a teaser to show how modern JavaScript development might look.
If you are interested in a deep dive into the topic of modern JavaScript development, HTML5, ES6, AngularJS, React, Gulp, Grunt etc, please consider my courses: http://www.ivorycode.com/#schulung
http://www.learntek.org/product/react-js-training/
http://www.learntek.org
Learntek is global online training provider on Big Data Analytics, Hadoop, Machine Learning, Deep Learning, IOT, AI, Cloud Technology, DEVOPS, Digital Marketing and other IT and Management courses. We are dedicated to designing, developing and implementing training programs for students, corporate employees and business professional.
Replace Angular with React. Make the move from the MEAN stack to the powerful MERN Stack!
Come and learn about the MERN stack. No, that isn't a typo. The MERN stack is Mongo, Express, and Node, with React instead of Angular. While both React and Angular are remarkable JavaScript technologies, React comes with less baggage. There is no TypeScript, no annotations, no bossy framework telling you how to do everything.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
Performance and Scalability Art of Isomorphic React ApplicationsDenis Izmaylov
A couple weeks ago I have talked at React Amsterdam Meetup about Performance and Scalability of Isomorphic React Application.
Have a look at the video from this talk: https://www.youtube.com/watch?list=PLNBNS7NRGKMGLeJj3cuE4JDqJ0_9xAbZV&v=kI19MCP-wIE
In this talk we will explore how to organize component-centric code splitting with server side rendering and universal data fetching in React, when your application becomes large enough.
Talk description: When you have a large enough application, a single large bundle with all of your code becomes a problem for startup time. You need to start breaking your app into separate bundles and load them dynamically when needed.
How to split a single bundle into multiple is a well-solved problem with tools like Browserify and Webpack.
But now you need to find places in your application where you can decide to split off into another bundle and load it asynchronously. You also need a way to communicate between server and client, and organize server side rendering and implement universal data fetching for your application.
Even React Router team failed with this task
“We’ve tried and failed a couple of times”(https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering)
I will show you how to solve this problem, we will use a great library called React Loadable.
Also, we will look at some solutions which you can achieve with React Router v4 and why they are not the best one.
For this talk, you will need some knowledge in React, Babel (ES6), Node, Webpack 2, Redux, and little bit React Router v4.
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS
What's all the hype about React Native? What is it? How does it work? Why does it matter and what clues does it give us about the future of web development? Did you know there's a React Native for the Web? What's that all about? It can't be all good, what's wrong with it? Where should you go to find out more?
Agenda
• Understanding the evolution of the web.
• Web 3 architecture
• Getting started as a Web 3 developer
Speakers
• Lipsa Chhotray
• O.P. Pachoriya
• Rahul Mohan
Topics covered:
1. Generating a new Remix project
2. Conventional files
3. Routes (including the nested variety)
4. Styling
5. Database interactions (via sqlite and prisma)
6. Mutations, Validation, and Authentication
7. Error handling
8. SEO with Meta Tags and much more
Setting Up Development Environment For Google App Engine & Python | TalenticaTalentica Software
Google App Engine is a PAAS offering from Google Cloud Platform, which enables you to build complex web solutions with significant ease without worrying too much about the scalability or infrastructure management.
Glimpse through our presentation as we explain how to build GAE apps using pycharm with debugging enabled. To know more click here https://www.talentica.com/blogs/setting-up-development-environment-for-google-app-engine-and-python/
Know About Talentica -
Talentica Software is an innovative outsourced product development company that helps startups build their own products. We help technology companies transform their ideas into successful products by partnering in their roadmap from pre-funded startups to a profitable acquisition.
We have successfully built core intellectual property for more than 100 customers so far. We have the deep technological expertise, proven track record, and unique methodology to build products successfully. Our customers include some of the most innovative product companies in the USA, Europe, and India.
To know more about how Talentica have helped startups grow click here https://www.talentica.com/work.html
To know more about Talentica click here https://www.talentica.com/
To get in touch with us click here https://www.talentica.com/contact.htm
Connected World in android - Local data sharing and service discoveryTalentica Software
With the boom of IOT, BLE (Bluetooth low energy) and other connected devices and protocols, android app development is no longer limited to basic client server interaction. Android app development now includes interaction with other devices (not necessarily android) in the vicinity, at its very core.
Transferring files with friends without internet, Bluetooth and WiFi; streaming media from your phone or tablet to dumb plain TV (without HDMI cables) and switching off bedroom light with phone have become part of our lives. Let's explore how it's done and where do we need to start to kick start such projects.
In this session we will explore:
• Communication between connected and non-connected android devices.
• BLE overview (Bluetooth Low Energy).
• BLE APIs you should know about.
• WiFi-Direct and P2P.
• WiFi-Direct service discovery.
• Network service discovery (NSD) and relevant demos
One of the challenges faced by many web development based projects is the integration of source code for multiple releases during parallel development. The task to build and test the multiple versions of source code can eat out the quality time and limit the efficiency of the development/QA team. The case study focuses to resolve the issues of extensive effort consumed in build and deployment process from multiple branches in source repository and aim at Identification of source code integration issues at the earliest stage. This can further be enhanced to limit the manual intervention by integration of build system with test automation tool.
The above can be achieved by using different CI tools (like Hudson/Bamboo/TeamCity/CruiseControl etc) for continuous build preparation and its integration with any test automation suite. The case study specifies the use of CI-Hudson tool for continuous integration using ANT tool for build preparation and further invoking the automation test suite developed using selenium. It also discusses the limitations and challenges of using such an integration system for testing a web based application deployed on Apache Tomcat server. It also details additional plugins available to enhance such an integration of multiple systems and what can be achieved using the above integration.
Technology Challenges in Building New Media ApplicationsTalentica Software
New media applications need to connect to millions of users across multiple media and platforms.
Applications simultaneously need to
- Work across computers, smart phones and other mobile devices, all of which have to sync up seamlessly in the background.
- Link to various social media platforms, such as blogs, twitter, facebook, etc.
- Target the content to the users of each of these platforms
This brings up its own set of technical challenges namely scalable application architectures, flexible IT infrastructure and tools for targeting
Flex on Grails - Rich Internet Applications With Rapid Application DevelopmentTalentica Software
Flex on Grails lets you combine the processes and technologies of rapid application development to the creation of Rich Internet Applications (RIAs).
This session provides an introduction to Flex on Grails and benefits of Flex over an Ajax based web application. Learn how to build / debug and run an application using Flex on Grails. The session is based on the experience gained while building an internal CRM application which took us days instead of weeks to develop!
Building scalable and language independent java services using apache thriftTalentica Software
This presentation is about the key challenges of cross language interactions and how they can be overcome. We discuss the Apache Thrift as a solution and understand its principle of Operation with code snippets and examples.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
21. 21
Web performance Loading time (Tree shaking)
Keeping Babel from
transpiling ES6
modules to
CommonJS modules
• Tree shaking is
much more
difficult to do for
CommonJS
modules.
Tell webpack about
side effects
Import only what
we need
32. 32
Web performance Rendering time (Composting)
If certain parts of a page that should be separate layer (like slide-in side menu) is not getting one,
then you can hint to the browser by using will-change attribute in CSS.
33. 33
Web performance Rendering time
Avoid layout changes wherever possible
Layout is almost always scoped to the entire document. If you have a lot of elements, it’s going
to take a long time to figure out the locations and dimensions of them all.
38. 38
Web performance Theory
Largest Contentful Paint (LCP): measures loading performance.
To provide a good user experience, LCP should occur within 2.5
seconds of when the page first starts loading.
47. 47
Web performance Theory
First Input Delay (FID): measures interactivity. To provide a
good user experience, pages should have a FID of 100
milliseconds or less.
49. 49
Web performance Theory
Cumulative Layout Shift (CLS): measures visual stability. To
provide a good user experience, pages should maintain a CLS of
0.1. or less.
58. React 17
No new developer-facing features
primarily focused on making it easier to upgrade React itself.
It makes it easier to embed React into apps built with other technologies
It’s possible to use two versions of React on the page
Supports new JSX Transform
58
59. Old JSX transform
• The old JSX transform turned JSX into React.createElement(...) calls
Source Code
Old JSX Transform
59
60. New JSX transform
• original code did not need to import React to use JSX
anymore.
• But we would still need to import React in order to use Hooks
or other exports that React provides.
60
61. Diagrammatical
Difference
React will no longer
attach event handlers
at the document level
under the hood.
Instead, it will attach
them to the root DOM
container into which
your React tree is
rendered
61
62. React 18
Features The New Root API
startTransition API
Strict Effects coming to Strict Mode
SSR Improvements
Suspense List
useDeferredValue
• Not yet released
• Alpha version Available today
• When it’s released, React 18 will
include out-of-the-box
improvements.
• React 18 supports concurrent
rendering
62
63. New Root API
63
Current Support
ReactDOM.render(<App/>,document.getElementById('root’));
Upcoming
64. startTransition API
• This helps in keeping the current webpage responsive and being able to do
heavy non-blocking UI updates at the same time.
• This API provides a way to differentiate between quick updates and
delayed updates. The delayed update(i.e. transition of one UI view to
another) is termed as Transition Updates.
• For urgent updates like typing, hover, clicking, we call props/functions
usually like this :
• For non-urgent or heavy UI updates, we can wrap it in a startTransition API
as :
64
65. Strict Effects coming to Strict Mode
• React18 will ship <StrictMode /> along with Strict
Effects Mode now. Just like Strict Mode, this would be for
development builds and improved DX.
• When a component is wrapped in Strict Effects, React will
make sure to "intentionally" run side-effects twice to detect
unusual behaviour/pattern
65
66. SSR Improvements
• SSR had to load the entire page before it can start hydrating
page.
• This changes in React18, now we can break React
components into smaller chunks using <Suspense />.
66
67. Suspense List
• Another React 18 concurrent feature, which "orchestrates" the order in
which heavy data fetched components appear on the screen.
• A <SuspenseList /> takes in revealOrder prop with values forward,
backward or together
67
68. useDeferredValue
• useDeferredValue takes in a state value, a timeout in
milliseconds and returns a "deferred version" of that value. This
value lags by the provided timeout seconds.
68
70. React Best Practices for performance
Optimization
• Use React Pure Components to reduce Re-rendering
• Use React.memo for Component Memorization
• Using Lazy Loading of React Components
• Throttling Events
• Debouncing Events
• Virtualization
70
71. Pure Components
• Re-rendering can be reduced using Pure
components
• PureComponents take care
of shouldComponentUpdate— it does the shallow
comparison on the state and props data.
• It compares previous props and state to the next
and if not equal then only re-renders.
• Comparing primitive and object references is a
cheaper operation than updating the component
view.
71
73. React.memo
• React.memo is a higher-order component.
• It is similar to a PureComponent,
but PureComponent belongs to the class
implementation for Component, whereas “memo”
is used for the creation of functional components.
• It memorizes the output from the last execution
for a certain input prop and boosts the
application performance.
73
75. Lazy Loading
All the main components and the external
dependencies are merged into a single file and sent
over the network to have the web application up and
running.
This saves a lot of network calls, but also leads to a
problem where this single file becomes a large file
and consumes lots of network bandwidth.
The application keeps waiting for this large file to be
loaded and executed, so delays in transmission of this
file over the network lead to higher rendering time
for the application.
75
76. Resolution using Lazy Loading
• To resolve this problem, we can incorporate the
concept of code splitting.
• Webpack supports code splitting.
• Loading on runtime reduces the size of the initial
bundle.
• Suspense and lazy used for supporting this
concept.
76
79. Throttling Events
Throttling means delaying function execution.
It ensures that the function will be called at least once in a
specific time period. It means that it will prevent a function from
running if it has run recently. It ensures that the function runs
regularly in fixed intervals.
79
80. When to use Throttling ?
• In the case of page scrolling, instead of triggering
the scroll event too frequently, we delay the event
for some time so that multiple events can be
stacked together.
• When we have infinite scroll and the data has to
be fetched as the user approaches the bottom of
the page, we can use throttling.
• If throttling is not used, each page scroll towards
the bottom of the page will trigger multiple
events, and multiple calls to the network are
triggered, leading to performance concerns.
80
81. Debouncing Concepts
• Debouncing refers to ignoring the event handler
call until the calls have stopped for a certain
amount of time.
• Let's imagine that we have an event with
a debounce time of one second. The event
handler for that event will be triggered after one
second, once the user stops triggering the event.
81
82. Supporting Library
• We can use third-party libraries to implement and
use the throttling and debouncing features. One
such library is throttle-debounce.
82
83. Virtualization
• When we have large list to render it overload the DOM
and performance hampers.
• To overcome this issue virtualization came into picture.
• “virtualized list” meaning that only the visible rows are
rendered.
• This will increase the performance in a way that DOM
have only that list items which is currently visible in
the scroll window.
83