This document discusses how to use React hooks to share logic between components and manage state in functional components. It provides examples of using the useState, useEffect, useContext, useMemo, useCallback, and useReducer hooks. Custom hooks like useHash and useSuggestions are demonstrated to encapsulate reusable stateful logic and avoid needing Redux for some cases like fetching autocomplete suggestions.
What about reactivity? So much talks about it, but does it really reactive? How to solve current reactivity purposes. Future of Vue.js. Try to find answers in these slides.
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JSFestUA
The React team has been working hard on changing the game of writing declarative components: Hooks! With React Hooks we are now able to use the capabilities of class components in functional components. In this talk we are going to discover the Hooks API and explore some exciting patterns using them.
What about reactivity? So much talks about it, but does it really reactive? How to solve current reactivity purposes. Future of Vue.js. Try to find answers in these slides.
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JSFestUA
The React team has been working hard on changing the game of writing declarative components: Hooks! With React Hooks we are now able to use the capabilities of class components in functional components. In this talk we are going to discover the Hooks API and explore some exciting patterns using them.
Leveraging Completable Futures to handle your query results AsynchrhonouslyDavid Gómez García
The challenges of developing applications recently have increased. With the popularity of cloud environments, the scalability required by new architectures and the need to support more load efficiently, there has been an increase in attention that we need to pay to concurrency and efficiency.
One strategy to achieve that efficiency consists of distributing the modules of your application in several different smaller components running concurrently. But one of the problems that arise from such distribution of running modules comes when you need to send a request (and wait for the response) to several different modules. How do you design that request(s)-response(s) to be as efficient as possible?
CompletableFutures was introduced with Java 8 but has evolved over the years with every new version of Java released. In this talk, we will take a look at it, to:
understand how to use CompletableFutures,
how they can help us to split our workload into different request and coordinate them asynchronously and concurrently
How you can chain behavior to the responses.
How you can use CompletableFuture in your design to create APIs that enable your users to get the most of your Component/library/module.
Redux is a powerful tool to manage our state. Can we use the same concepts in the server side so we can share the same store with users using our app at the same time in games or collaborative apps? We will see how to connect our Redux store to stores in the server side written in Node.js and Elixir OTP GenServers, and how to extend this perspective beyond particular implementations.
Talk presented in AgentConf'18
Podstawy wykorzystania biblioteki React.js. Prezentacja przedstawiona na warsztatach dla studentów Politechniki Krakowskiej w ramach cyklu wartsztatów DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
The presentation was created for a DreamLab Academy workshop on React.js. For more details get in touch - academy@dreamlab.pl
Promises (also known as futures) are a way to manage asynchronous control flow. This deck contains a lot of information on using the bluebird promise library and everything that it gives you.
Higher Order Components and Render PropsNitish Phanse
Talk given at React foo Hyderabad 2018. Outlines the differences between higher order components and render props. Both being design patterns used primarily to aid reusability of components across a codebase.
Pragmatic Functional Refactoring with Java 8Codemotion
by Raoul-Gabriel Urma - You may be hearing a lot of buzz around functional programming. For example, Java 8 recently introduced new features and APIs inspired from functional ideas such as first-class functions, composition and immutability. In this talk we show how you can refactor your traditional object-oriented Java to using FP features and APIs from Java 8 in a beneficial manner. - How to adapt to requirement changes using first-class functions - How you can enhance code reusability using currying - How you can make your code more robust by favouring immutability over mutability - and more!
탑크리에듀(http://www.topcredu.co.kr)에서 제공하는 스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)강좌입니다. Spring Ioc 실습(어노테이션기반, 인터페이스, 세터주입)에 대한 자료이니 많은 도움 되셨길 바랍니다. http://ojc.asia/ 에 들어가시면 보다 많은 자료들이 게시되어 있으니 참고바랍니다^^.
Leveraging Completable Futures to handle your query results AsynchrhonouslyDavid Gómez García
The challenges of developing applications recently have increased. With the popularity of cloud environments, the scalability required by new architectures and the need to support more load efficiently, there has been an increase in attention that we need to pay to concurrency and efficiency.
One strategy to achieve that efficiency consists of distributing the modules of your application in several different smaller components running concurrently. But one of the problems that arise from such distribution of running modules comes when you need to send a request (and wait for the response) to several different modules. How do you design that request(s)-response(s) to be as efficient as possible?
CompletableFutures was introduced with Java 8 but has evolved over the years with every new version of Java released. In this talk, we will take a look at it, to:
understand how to use CompletableFutures,
how they can help us to split our workload into different request and coordinate them asynchronously and concurrently
How you can chain behavior to the responses.
How you can use CompletableFuture in your design to create APIs that enable your users to get the most of your Component/library/module.
Redux is a powerful tool to manage our state. Can we use the same concepts in the server side so we can share the same store with users using our app at the same time in games or collaborative apps? We will see how to connect our Redux store to stores in the server side written in Node.js and Elixir OTP GenServers, and how to extend this perspective beyond particular implementations.
Talk presented in AgentConf'18
Podstawy wykorzystania biblioteki React.js. Prezentacja przedstawiona na warsztatach dla studentów Politechniki Krakowskiej w ramach cyklu wartsztatów DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
The presentation was created for a DreamLab Academy workshop on React.js. For more details get in touch - academy@dreamlab.pl
Promises (also known as futures) are a way to manage asynchronous control flow. This deck contains a lot of information on using the bluebird promise library and everything that it gives you.
Higher Order Components and Render PropsNitish Phanse
Talk given at React foo Hyderabad 2018. Outlines the differences between higher order components and render props. Both being design patterns used primarily to aid reusability of components across a codebase.
Pragmatic Functional Refactoring with Java 8Codemotion
by Raoul-Gabriel Urma - You may be hearing a lot of buzz around functional programming. For example, Java 8 recently introduced new features and APIs inspired from functional ideas such as first-class functions, composition and immutability. In this talk we show how you can refactor your traditional object-oriented Java to using FP features and APIs from Java 8 in a beneficial manner. - How to adapt to requirement changes using first-class functions - How you can enhance code reusability using currying - How you can make your code more robust by favouring immutability over mutability - and more!
탑크리에듀(http://www.topcredu.co.kr)에서 제공하는 스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)강좌입니다. Spring Ioc 실습(어노테이션기반, 인터페이스, 세터주입)에 대한 자료이니 많은 도움 되셨길 바랍니다. http://ojc.asia/ 에 들어가시면 보다 많은 자료들이 게시되어 있으니 참고바랍니다^^.
Why using composition in React ? What are the alternative (mixins, inheritance)? How to use composition to build your React application? What are the pros and cons?
At the time of writing, React hooks are still in alpha but they can already be used and, since it takes a while to get used to them, it's better to understand them as soon as possible. In this talk we will see some use cases in which we refactor a class component into a hook-based functional component.
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
We built React to solve one problem: building large applications with data that changes over time. To do this, React uses two main ideas.
Simple
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
Declarative
When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Enhance react app with patterns - part 1: higher order componentYao Nien Chung
Writing codes without mindset is a mess. Use one of React advanced patterns to enhance your code base by Higher Order Component.
Please check demo repo for more detail: https://github.com/xJkit/trendmicro-fed-talk-pattern-hoc
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Łukasz Chruściel
No one wants their application to drag like a car stuck in the slow lane! Yet it’s all too common to encounter bumpy, pothole-filled solutions that slow the speed of any application. Symfony apps are not an exception.
In this talk, I will take you for a spin around the performance racetrack. We’ll explore common pitfalls - those hidden potholes on your application that can cause unexpected slowdowns. Learn how to spot these performance bumps early, and more importantly, how to navigate around them to keep your application running at top speed.
We will focus in particular on tuning your engine at the application level, making the right adjustments to ensure that your system responds like a well-oiled, high-performance race car.
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Understanding Nidhi Software Pricing: A Quick Guide 🌟
Choosing the right software is vital for Nidhi companies to streamline operations. Our latest presentation covers Nidhi software pricing, key factors, costs, and negotiation tips.
📊 What You’ll Learn:
Key factors influencing Nidhi software price
Understanding the true cost beyond the initial price
Tips for negotiating the best deal
Affordable and customizable pricing options with Vector Nidhi Software
🔗 Learn more at: www.vectornidhisoftware.com/software-for-nidhi-company/
#NidhiSoftwarePrice #NidhiSoftware #VectorNidhi
Software Engineering, Software Consulting, Tech Lead, Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Transaction, Spring MVC, OpenShift Cloud Platform, Kafka, REST, SOAP, LLD & HLD.
Utilocate offers a comprehensive solution for locate ticket management by automating and streamlining the entire process. By integrating with Geospatial Information Systems (GIS), it provides accurate mapping and visualization of utility locations, enhancing decision-making and reducing the risk of errors. The system's advanced data analytics tools help identify trends, predict potential issues, and optimize resource allocation, making the locate ticket management process smarter and more efficient. Additionally, automated ticket management ensures consistency and reduces human error, while real-time notifications keep all relevant personnel informed and ready to respond promptly.
The system's ability to streamline workflows and automate ticket routing significantly reduces the time taken to process each ticket, making the process faster and more efficient. Mobile access allows field technicians to update ticket information on the go, ensuring that the latest information is always available and accelerating the locate process. Overall, Utilocate not only enhances the efficiency and accuracy of locate ticket management but also improves safety by minimizing the risk of utility damage through precise and timely locates.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
In the ever-evolving landscape of technology, enterprise software development is undergoing a significant transformation. Traditional coding methods are being challenged by innovative no-code solutions, which promise to streamline and democratize the software development process.
This shift is particularly impactful for enterprises, which require robust, scalable, and efficient software to manage their operations. In this article, we will explore the various facets of enterprise software development with no-code solutions, examining their benefits, challenges, and the future potential they hold.
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
10. HOW TO SHARE LOGIC
BETWEEN COMPONENTS?
Tony Lee
TEXT
11. REUSING LOGIC
HIGHER-ORDER COMPONENTS
▸ A function that takes a component
and returns a new component
▸ e.g. React-Redux’s connect function
<ComponentWhichImplementsLogic>
<ComponentWhichUsesLogic />
<ComponentWhichImplementsLogic>
ComponentWhichImplementsLogic(
ComponentWhichUsesLogic
)
withMousePosition(withClock(MyComponent))
withClock(MyComponent)
12. REUSING LOGIC
RENDER PROPS
▸ Using a prop whose value is a
function.
▸
<Clock
render={props => <MyComponent {...props} />}
/>
<Clock render={({time}) => (
<MousePosition render={({x, y}) => (
<MyComponent time={time} x={x} y={y} />
)} />
)} />
15. GIANT COMPONENTS
▸ The logic is split across a lot of different lifecycle methods
▸ Duplicate code for different lifecycle methods
▸ Thousands of lines code
17. SHOULD I USE CLASS
COMPONENT OR FUNCTION
COMPONENT?
Rajalakshmi Somasundaram
TEXT
18. CONFUSING CLASSES
▸ Use class component to access state and life cycles
▸ Have to convert your function component to class
component if you add some state (Why not use class
component by default)
▸ Don’t forget `bind(this)` 😄
20. Functions which can only be used from inside
Functional Components or Other Hooks
Named useXXX()
Use state, life cycles and other features
without writing a class
Hooks are highly re-usable
and independent for each component
31. useReducer
▸ useReducer + Context API = redux
▸ when you have complex state logic that involves multiple sub-values
or when the next state depends on the previous one.
▸ 《Use Hooks + Context, not React + Redux》
61. WHY DO WE NEED REDUX FOR
SUGGESTIONS?
Yizhi Zhou
TEXT
62. TEXT
WHY DO WE NEED REDUX?
▸ Communication between
components
▸ e.g. Input ->
SuggestionsList
▸ Dealing with async
▸ e.g. Ajax call
▸ Redux Dev Tool
63. COULD WE GET RIDE OF
REDUX FOR SUGGETIONS?
Tony Lee
TEXT
65. TEXT
DEALING WITH ASYNC
▸ We can’t use async/await in a render function. 😢
let loading = false;
const suggestions = await fetchSuggestions(query);
loading = false;
66. TEXT
DEALING WITH ASYNC
▸ But we can use custom hooks. 😄
const [query, setQuery] = useState('');
const {loading, suggestions} = useSuggestions(query);
if (loading) {
return 'loading...'
}
return (
<ul>
{suggestions.map(renderSuggstion)}
</ul>
)
75. HOOKS VS REDUX
HOOKS
▸ Light
▸ New APIs for function
components
▸ useReducer + Context works
like redux
▸ React Dev Tool
REDUX
▸ Powerful
▸ State management
framework
▸ React-Redux has hooks API,
useSelector, useDispatch
▸ Redux Dev Tool