SlideShare a Scribd company logo
1 of 8
React tips
for everyone
by Mislav Mandaric, 2017-03-30
Contents
• State
• Rerender
• ES2016+
• Composition and Higher Order Components (HOC)
State
• Update should not be done directly
• this.state.key = ‘value’;
• this.setState({ key: ‘value’ });
• Updates are merged
• // current state { key1: ‘value1’, key2: ‘value2’ }
• this.setState({ key1: ‘new value1’, key2: this.state.key2 });
• this.setState({ key1: ‘new value1’ });
• Updates can be async
• this.setState({ key: [...this.state.key,
this.props.newKey] });
• this.setState((prevState, props) => ({ key:
[...prevState.key, props.newKey }));
Rerender
• Reconciliation algorithm
• If node type is different, tear the whole subtree down
• DOM nodes are destroyed
• Component nodes are unmounted
• Create new subtree
• If node type is the same, update its data
• DOM nodes attributes are updated
• Component nodes props are updated
• Rerender current node
Rerender
• Rerender algorithm
• Depends on shouldComponentUpdate method
• If component should not be updated, whole subtree will not be
updated
• Helpful constructs
• PureComponent class with immutable state
ES2016+
• Object spread and rest operators (Stage 3)
• const obj1 = { k1: 1, k2: 2 };
• const obj2 = { k3: 3, k4: 4 };
• const newObj = Object.assign({}, obj1, obj2, { k5: 5 });
• const newObj = {...obj1, ...obj2, k5: 5 };
• const { k1, k2, ...rest } = newObj;
• // rest = { k3: 3, k4: 4, k5: 5 };
• Property initializer syntax (Stage 2)
• this.function = this.function.bind(this);
function () { … }
• this.function = () => { … }
Composition and HOCs
• Extending components functionality without inheritance
• Composition
• Special component renders generic component, with predefined
props and children
• HOCs
• Function accepts component and creates new one with
additional functionality
• Apply this function when need to create new component
Thank you! Questions?
Demo code available at
https://github.com/axilis/chch-react

More Related Content

What's hot

React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsANKUSH CHAVAN
 
Martin Anderson - threads v actors
Martin Anderson - threads v actorsMartin Anderson - threads v actors
Martin Anderson - threads v actorsbloodredsun
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to HooksSoluto
 
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functionsNAVER D2
 
No More Deadlocks; Asynchronous Programming in .NET
No More Deadlocks; Asynchronous Programming in .NETNo More Deadlocks; Asynchronous Programming in .NET
No More Deadlocks; Asynchronous Programming in .NETFilip Ekberg
 
Asynchronous programming
Asynchronous programmingAsynchronous programming
Asynchronous programmingFilip Ekberg
 
Mule esb object_to_jackson_json
Mule esb object_to_jackson_jsonMule esb object_to_jackson_json
Mule esb object_to_jackson_jsonDavide Rapacciuolo
 
Asynchronous JavaScript Programming with Callbacks & Promises
Asynchronous JavaScript Programming with Callbacks & PromisesAsynchronous JavaScript Programming with Callbacks & Promises
Asynchronous JavaScript Programming with Callbacks & PromisesHùng Nguyễn Huy
 
My Gentle Introduction to RxJS
My Gentle Introduction to RxJSMy Gentle Introduction to RxJS
My Gentle Introduction to RxJSMattia Occhiuto
 
Introduction of Object Oriented JavaScript
Introduction of Object Oriented JavaScriptIntroduction of Object Oriented JavaScript
Introduction of Object Oriented JavaScriptNexThoughts Technologies
 
Introduction to React for jQuery Developers
Introduction to React for jQuery DevelopersIntroduction to React for jQuery Developers
Introduction to React for jQuery DevelopersRonald Huereca
 
Intro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich AndroidIntro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich AndroidEgor Andreevich
 
Introduction to Unit Testing (Part 1 of 2)
Introduction to Unit Testing (Part 1 of 2)Introduction to Unit Testing (Part 1 of 2)
Introduction to Unit Testing (Part 1 of 2)Dennis Byrne
 
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi
 

What's hot (18)

React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
 
React Internals
React InternalsReact Internals
React Internals
 
React hooks
React hooksReact hooks
React hooks
 
Martin Anderson - threads v actors
Martin Anderson - threads v actorsMartin Anderson - threads v actors
Martin Anderson - threads v actors
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
 
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 2. functions
 
RxJava on Android
RxJava on AndroidRxJava on Android
RxJava on Android
 
React hooks
React hooksReact hooks
React hooks
 
No More Deadlocks; Asynchronous Programming in .NET
No More Deadlocks; Asynchronous Programming in .NETNo More Deadlocks; Asynchronous Programming in .NET
No More Deadlocks; Asynchronous Programming in .NET
 
Asynchronous programming
Asynchronous programmingAsynchronous programming
Asynchronous programming
 
Mule esb object_to_jackson_json
Mule esb object_to_jackson_jsonMule esb object_to_jackson_json
Mule esb object_to_jackson_json
 
Asynchronous JavaScript Programming with Callbacks & Promises
Asynchronous JavaScript Programming with Callbacks & PromisesAsynchronous JavaScript Programming with Callbacks & Promises
Asynchronous JavaScript Programming with Callbacks & Promises
 
My Gentle Introduction to RxJS
My Gentle Introduction to RxJSMy Gentle Introduction to RxJS
My Gentle Introduction to RxJS
 
Introduction of Object Oriented JavaScript
Introduction of Object Oriented JavaScriptIntroduction of Object Oriented JavaScript
Introduction of Object Oriented JavaScript
 
Introduction to React for jQuery Developers
Introduction to React for jQuery DevelopersIntroduction to React for jQuery Developers
Introduction to React for jQuery Developers
 
Intro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich AndroidIntro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich Android
 
Introduction to Unit Testing (Part 1 of 2)
Introduction to Unit Testing (Part 1 of 2)Introduction to Unit Testing (Part 1 of 2)
Introduction to Unit Testing (Part 1 of 2)
 
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
 

Similar to React tips

Evan Schultz - Angular Summit - 2016
Evan Schultz - Angular Summit - 2016Evan Schultz - Angular Summit - 2016
Evan Schultz - Angular Summit - 2016Evan Schultz
 
What's new in Cassandra 2.0
What's new in Cassandra 2.0What's new in Cassandra 2.0
What's new in Cassandra 2.0iamaleksey
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)Eduard Tomàs
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016Codemotion
 
Introduction to-mongo db-execution-plan-optimizer-final
Introduction to-mongo db-execution-plan-optimizer-finalIntroduction to-mongo db-execution-plan-optimizer-final
Introduction to-mongo db-execution-plan-optimizer-finalM Malai
 
Introduction to Mongodb execution plan and optimizer
Introduction to Mongodb execution plan and optimizerIntroduction to Mongodb execution plan and optimizer
Introduction to Mongodb execution plan and optimizerMydbops
 
Interface result set
Interface result setInterface result set
Interface result setmyrajendra
 
Best Practices in Qt Quick/QML - Part I
Best Practices in Qt Quick/QML - Part IBest Practices in Qt Quick/QML - Part I
Best Practices in Qt Quick/QML - Part IICS
 
GDC 2010 - A Dynamic Component Architecture for High Performance Gameplay
GDC 2010 - A Dynamic Component Architecture for High Performance GameplayGDC 2010 - A Dynamic Component Architecture for High Performance Gameplay
GDC 2010 - A Dynamic Component Architecture for High Performance GameplayTerrance Cohen
 
COScheduler In Depth
COScheduler In DepthCOScheduler In Depth
COScheduler In DepthWO Community
 
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)Kevin Sutter
 
How Data Flow analysis works in a static code analyzer
How Data Flow analysis works in a static code analyzerHow Data Flow analysis works in a static code analyzer
How Data Flow analysis works in a static code analyzerAndrey Karpov
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)BoneyGawande
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)Anis Bouhachem Djer
 
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma Christopher Bartling
 

Similar to React tips (20)

Evan Schultz - Angular Summit - 2016
Evan Schultz - Angular Summit - 2016Evan Schultz - Angular Summit - 2016
Evan Schultz - Angular Summit - 2016
 
What's new in Cassandra 2.0
What's new in Cassandra 2.0What's new in Cassandra 2.0
What's new in Cassandra 2.0
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
 
Introduction to-mongo db-execution-plan-optimizer-final
Introduction to-mongo db-execution-plan-optimizer-finalIntroduction to-mongo db-execution-plan-optimizer-final
Introduction to-mongo db-execution-plan-optimizer-final
 
Introduction to Mongodb execution plan and optimizer
Introduction to Mongodb execution plan and optimizerIntroduction to Mongodb execution plan and optimizer
Introduction to Mongodb execution plan and optimizer
 
Interface result set
Interface result setInterface result set
Interface result set
 
Easy mock
Easy mockEasy mock
Easy mock
 
Spock
SpockSpock
Spock
 
Best Practices in Qt Quick/QML - Part I
Best Practices in Qt Quick/QML - Part IBest Practices in Qt Quick/QML - Part I
Best Practices in Qt Quick/QML - Part I
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
COScheduler
COSchedulerCOScheduler
COScheduler
 
GDC 2010 - A Dynamic Component Architecture for High Performance Gameplay
GDC 2010 - A Dynamic Component Architecture for High Performance GameplayGDC 2010 - A Dynamic Component Architecture for High Performance Gameplay
GDC 2010 - A Dynamic Component Architecture for High Performance Gameplay
 
COScheduler In Depth
COScheduler In DepthCOScheduler In Depth
COScheduler In Depth
 
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)
InterConnect 2016, OpenJPA and EclipseLink Usage Scenarios (PEJ-5303)
 
How Data Flow analysis works in a static code analyzer
How Data Flow analysis works in a static code analyzerHow Data Flow analysis works in a static code analyzer
How Data Flow analysis works in a static code analyzer
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)
 
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
 

More from Axilis

Web App Security for Devs
Web App Security for DevsWeb App Security for Devs
Web App Security for DevsAxilis
 
Configuring SSL on NGNINX and less tricky servers
Configuring SSL on NGNINX and less tricky serversConfiguring SSL on NGNINX and less tricky servers
Configuring SSL on NGNINX and less tricky serversAxilis
 
Journey to Microservice architecture via Amazon Lambda
Journey to Microservice architecture via Amazon LambdaJourney to Microservice architecture via Amazon Lambda
Journey to Microservice architecture via Amazon LambdaAxilis
 
Should you react?
Should you react?Should you react?
Should you react?Axilis
 
Sweet ES2015 (ES6) Taste
Sweet ES2015 (ES6) TasteSweet ES2015 (ES6) Taste
Sweet ES2015 (ES6) TasteAxilis
 
NuGet Must Haves for LINQ
NuGet Must Haves for LINQNuGet Must Haves for LINQ
NuGet Must Haves for LINQAxilis
 
Quick introduction to zeplin
Quick introduction to zeplinQuick introduction to zeplin
Quick introduction to zeplinAxilis
 
Diving into Node with Express and Mongo
Diving into Node with Express and MongoDiving into Node with Express and Mongo
Diving into Node with Express and MongoAxilis
 
Node in Real Time - The Beginning
Node in Real Time - The BeginningNode in Real Time - The Beginning
Node in Real Time - The BeginningAxilis
 
Road to Dynamic LINQ - Part 2
 Road to Dynamic LINQ - Part 2 Road to Dynamic LINQ - Part 2
Road to Dynamic LINQ - Part 2Axilis
 
Road to Dynamic LINQ Part 1
Road to Dynamic LINQ Part 1Road to Dynamic LINQ Part 1
Road to Dynamic LINQ Part 1Axilis
 
.NET Core - Sve što trebate znati
.NET Core - Sve što trebate znati.NET Core - Sve što trebate znati
.NET Core - Sve što trebate znatiAxilis
 
Angular Translate
Angular TranslateAngular Translate
Angular TranslateAxilis
 
NPM, Bower and Gulp Kickstart in Visual Studio
 NPM, Bower and Gulp Kickstart in Visual Studio NPM, Bower and Gulp Kickstart in Visual Studio
NPM, Bower and Gulp Kickstart in Visual StudioAxilis
 
Dive Into Swift
Dive Into SwiftDive Into Swift
Dive Into SwiftAxilis
 
Python Tools for Visual Studio
Python Tools for Visual StudioPython Tools for Visual Studio
Python Tools for Visual StudioAxilis
 
Python Tools for Visual Studio
Python Tools for Visual StudioPython Tools for Visual Studio
Python Tools for Visual StudioAxilis
 
Wireframing
WireframingWireframing
WireframingAxilis
 
Angular 2.0: Getting ready
Angular 2.0: Getting readyAngular 2.0: Getting ready
Angular 2.0: Getting readyAxilis
 
Angular JS deep dive
Angular JS deep diveAngular JS deep dive
Angular JS deep diveAxilis
 

More from Axilis (20)

Web App Security for Devs
Web App Security for DevsWeb App Security for Devs
Web App Security for Devs
 
Configuring SSL on NGNINX and less tricky servers
Configuring SSL on NGNINX and less tricky serversConfiguring SSL on NGNINX and less tricky servers
Configuring SSL on NGNINX and less tricky servers
 
Journey to Microservice architecture via Amazon Lambda
Journey to Microservice architecture via Amazon LambdaJourney to Microservice architecture via Amazon Lambda
Journey to Microservice architecture via Amazon Lambda
 
Should you react?
Should you react?Should you react?
Should you react?
 
Sweet ES2015 (ES6) Taste
Sweet ES2015 (ES6) TasteSweet ES2015 (ES6) Taste
Sweet ES2015 (ES6) Taste
 
NuGet Must Haves for LINQ
NuGet Must Haves for LINQNuGet Must Haves for LINQ
NuGet Must Haves for LINQ
 
Quick introduction to zeplin
Quick introduction to zeplinQuick introduction to zeplin
Quick introduction to zeplin
 
Diving into Node with Express and Mongo
Diving into Node with Express and MongoDiving into Node with Express and Mongo
Diving into Node with Express and Mongo
 
Node in Real Time - The Beginning
Node in Real Time - The BeginningNode in Real Time - The Beginning
Node in Real Time - The Beginning
 
Road to Dynamic LINQ - Part 2
 Road to Dynamic LINQ - Part 2 Road to Dynamic LINQ - Part 2
Road to Dynamic LINQ - Part 2
 
Road to Dynamic LINQ Part 1
Road to Dynamic LINQ Part 1Road to Dynamic LINQ Part 1
Road to Dynamic LINQ Part 1
 
.NET Core - Sve što trebate znati
.NET Core - Sve što trebate znati.NET Core - Sve što trebate znati
.NET Core - Sve što trebate znati
 
Angular Translate
Angular TranslateAngular Translate
Angular Translate
 
NPM, Bower and Gulp Kickstart in Visual Studio
 NPM, Bower and Gulp Kickstart in Visual Studio NPM, Bower and Gulp Kickstart in Visual Studio
NPM, Bower and Gulp Kickstart in Visual Studio
 
Dive Into Swift
Dive Into SwiftDive Into Swift
Dive Into Swift
 
Python Tools for Visual Studio
Python Tools for Visual StudioPython Tools for Visual Studio
Python Tools for Visual Studio
 
Python Tools for Visual Studio
Python Tools for Visual StudioPython Tools for Visual Studio
Python Tools for Visual Studio
 
Wireframing
WireframingWireframing
Wireframing
 
Angular 2.0: Getting ready
Angular 2.0: Getting readyAngular 2.0: Getting ready
Angular 2.0: Getting ready
 
Angular JS deep dive
Angular JS deep diveAngular JS deep dive
Angular JS deep dive
 

Recently uploaded

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfonteinmasabamasaba
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...masabamasaba
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...Jittipong Loespradit
 
tonesoftg
tonesoftgtonesoftg
tonesoftglanshi9
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...masabamasaba
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...masabamasaba
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in sowetomasabamasaba
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxAnnaArtyushina1
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park masabamasaba
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2
 
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the SituationWhat Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the SituationJuha-Pekka Tolvanen
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...chiefasafspells
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastPapp Krisztián
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrandmasabamasaba
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024VictoriaMetrics
 

Recently uploaded (20)

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptx
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
 
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the SituationWhat Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
 

React tips

  • 1. React tips for everyone by Mislav Mandaric, 2017-03-30
  • 2. Contents • State • Rerender • ES2016+ • Composition and Higher Order Components (HOC)
  • 3. State • Update should not be done directly • this.state.key = ‘value’; • this.setState({ key: ‘value’ }); • Updates are merged • // current state { key1: ‘value1’, key2: ‘value2’ } • this.setState({ key1: ‘new value1’, key2: this.state.key2 }); • this.setState({ key1: ‘new value1’ }); • Updates can be async • this.setState({ key: [...this.state.key, this.props.newKey] }); • this.setState((prevState, props) => ({ key: [...prevState.key, props.newKey }));
  • 4. Rerender • Reconciliation algorithm • If node type is different, tear the whole subtree down • DOM nodes are destroyed • Component nodes are unmounted • Create new subtree • If node type is the same, update its data • DOM nodes attributes are updated • Component nodes props are updated • Rerender current node
  • 5. Rerender • Rerender algorithm • Depends on shouldComponentUpdate method • If component should not be updated, whole subtree will not be updated • Helpful constructs • PureComponent class with immutable state
  • 6. ES2016+ • Object spread and rest operators (Stage 3) • const obj1 = { k1: 1, k2: 2 }; • const obj2 = { k3: 3, k4: 4 }; • const newObj = Object.assign({}, obj1, obj2, { k5: 5 }); • const newObj = {...obj1, ...obj2, k5: 5 }; • const { k1, k2, ...rest } = newObj; • // rest = { k3: 3, k4: 4, k5: 5 }; • Property initializer syntax (Stage 2) • this.function = this.function.bind(this); function () { … } • this.function = () => { … }
  • 7. Composition and HOCs • Extending components functionality without inheritance • Composition • Special component renders generic component, with predefined props and children • HOCs • Function accepts component and creates new one with additional functionality • Apply this function when need to create new component
  • 8. Thank you! Questions? Demo code available at https://github.com/axilis/chch-react