React advance

Copyright © 2015 Talentica Software (I) Pvt Ltd. All rights
TALENTICA
SOFTWARE
React Adv.

Copyright © 2015 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights
Agenda
• List and Keys
• Refs
• Routing
• Higher Order Components in React
• Forms
• Context API
• React 16 Hooks

Context
Context provides a way to pass data through the
component tree without having to pass props down
manually at every level.
Designed to share data that can be considered
“global”.
Using context, we can avoid passing props through all
intermediate elements.

Think before you use
• It makes component reuse more difficult.
• Alternatives : Passing the whole component along
as a functional component.
• Many other alternative patterns are available like
RenderProps. It depends on the behaviour you
want to implement.

Context APIs
• React exposes following APIs for using Context :
– React.createContext : To Create a new context
const MyContext = React.createContext(defaultValue);
– Context.Provider : To pass the value further
<MyContext.Provider value={/* some value */}>

APIs contd…
• Class.contextType: To consumer the nearest context
value.
MyClass.contextType = MyContext;
• Context.Consumer : Subscribe to context changes
<MyContext.Consumer>
{value => /* render something based on the context
value */}
</MyContext.Consumer>

List and Keys
React DOM intricacies -:
• ReactJS uses observable’s to find the modified components.
Whenever setState() method is called on any component, ReactJS
makes that component dirty and re-renders it.
• Whenever setState() method is called, ReactJS creates the whole
Virtual DOM from scratch. Creating a whole tree is very fast so it
does not affect the performance.
• At any given time, ReactJS maintains two virtual DOM, one with the
updated state Virtual DOM and other with the previous state
Virtual DOM.

Significance of keys
• A React component, when we boil it down to its rawest form
(i.e. convert it from JSX), is just an object with a set of
properties. These properties define its type, name, state,
what props it has received, whether it has children, etc.
• The React reconciler will compare the newly created objects
with the current versions it has in the DOM. If any
differences are detected between certain properties, it will
redraw the components believing that it's the same object,
but properties have changed.

Where do Keys come into picture ?
The reconciler will look at the key, and the component
properties (in our simplified case, the content or children), and
then look through its previous list of components to see if it
matches any previous combinations.

[{
Type: "span",
Key: "0",
Children: "abhisar"
}, {
Type: "span",
Key: "1",
Children: "deepika"
}, {
Type: "span",
Key: "2",
Children: "abhishek"
}]
[{
Type: "span",
Key: "0", // Expected 0 to match 'sumit'
Children: "sumit" // IM DIFFERENT, REDRAW ME
}, {
Type: "span",
Key: "1", // Expected 1 to match 'abhisar'
Children: "abhisar" // IM DIFFERENT, REDRAW ME
}, {
Type: "span",
Key: "2", // Expected 2 to match 'deepika'
Children: "deepika" // IM DIFFERENT, REDRAW ME
}, {
Type: "span",
Key: "3", // IM NEW
Children: "abhishek" // DRAW ME
}]
Keys with index as value
1

Can we prevent this ?
We can prevent this. If we clearly define a key which is static,
unique, and uniquely associated with the properties it is
related to, React can acknowledge that it's the same
component, even when it has changed its position.
We can minimise DOM re-rendering from 4 to 1 (In this
specific example). Using keys attribute.

[{
Type: "span",
Key: “key-abhisar",
Children: "abhisar"
}, {
Type: "span",
Key: "key-deepika",
Children: "deepika"
}, {
Type: "span",
Key: “key-abhishek",
Children: "abhishek"
}]
[{
Type: "span",
Key: "key-sumit", // IM NEW
Children: "sumit" // DRAW ME
}, {
Type: "span",
Key: "key-abhisar", // Expected 'key-abhisar' to match 'abhisar'
Children: "abhisar" // IM THE SAME, DONT REDRAW ME
}, {
Type: "span",
Key: “key-deepika", // Expected 'key-deepika' to match 'deepika'
Children: "deepika" // IM THE SAME, DONT REDRAW ME
}, {
Type: "span",
Key: "key-abhishek", // Expected 'key-abhishek' to match 'abhishek'
Children: "abhishek" // IM THE SAME, DONT REDRAW ME
}]
Keys with unique ids
1

REFS (INTRODUCTION)
Refs make it possible to access DOM nodes directly within
React. This comes in handy in situations where, just as one
example, we want to change the child of a component.
Let’s say we want to change the value of an <input>
element, but without using props or re-rendering the
whole component.

REFS using CreateRef() -:
• createRef() is a new API that shipped with React
16.3. We can create a ref by calling React.createRef()
and attaching a React element to it using the ref
attribute on the element.
• The ref is created in the constructor and then
attached to the input element when it renders.
• We make use of current property in
this.correspondingRefName to access the DOM
node.

Passing a callback function to a REF
• React allows you to create a ref by passing a
callback function to the ref attribute of a
component.
• The callback is used to store a reference to the
DOM node in an instance property.
• When we make use of callback, React will call the ref
callback with the DOM node when the component
mounts, when the component un-mounts, it will call
it with null.

REF attribute as a string
This is the old way of creating a ref and it will likely be
removed in a future release because of some issues
associated with it.
• It requires that React keeps track of currently
rendering component (since it can't guess this). This
makes React a bit slower.
• It is not composable, i.e. if a library puts a ref on the
passed child, the user can't put another ref on it.
Callback refs are perfectly composable.

Routing in react

Routes
• The <Route/> component is one of the most important building blocks in the React
Router package. It renders the appropriate user interface when the current location
matches the route’s path. The path is a prop on the <Route/> component that
describes the pathname that the route should match as shown in the example that
follows
• Adding “exact” attribute ensures that only the pathname that exactly matches the
current location is rendered.
• The <Route/> component provides three props that can be used to determine which
component to render:
• => component
• => render
• => children

Route params…
Component Prop
The component prop defines the React element that will be returned by the Route when the
path is matched. This React element is created from the provided component using
React.createElement.
Render Prop
The render prop provides the ability for inline rendering and passing extra props to the
element. This prop expects a function that returns a React element when the current location
matches the route’s path.
Children Prop
The children prop is similar to the render prop since it always expects a function that returns a
React element. The major difference is that the element defined by the child prop is returned
for all paths irrespective of whether the current location matches the path or not.

Switch (avoids rendering of multiple components)
The react-router library also contains a <Switch/>
component that is used to wrap multiple <Route/>
components. The Switch component only picks the
first matching route among all its children route.

Link
• The react-router package also contains a <Link/>
component that is used to navigate the different parts
of an application by way of hyperlinks.
• It is similar to HTML’s anchor element but the main
difference is that using the Link component does not
reload the page but rather, changes the UI (i.e
preserves the STATE).

Nested routings
• When the router’s path and location are successfully
matched, a match object is created. This object
contains information about the URL and the path.
This information can be accessed as properties on
the match object.
• In order to successfully achieve nested routing, we
shall use match.url for nested Links and match.path
for nested Routes.

Protected Routes
• The rationale of having is a protected
route is that when a user tries to access
part of the application without logging in,
they are redirected to the login page to
sign into the application.
• For this redirect to work as intended, the
react-router package provides a
<Redirect/> component to serve this
purpose.

Higher Order Components (HOCs)
• A react component transforms some props into a UI.
• An HOC transforms a component into another
component.
• Based on callbacks and higher-order functions
• array.map(function(currentValue, index, arr), thisValue)

Callbacks And Higher-Order Functions
• Callbacks and HOF Demo

Higher-Order Functions
function higherOrderFunction (callback) {
return function () {
return callback()
}
}

Higher-Order Components
function higherOrderComponent (Component) {
return class extends React.Component {
render() {
return <Component />
}
}
}

HOCs – Relatable Use Case
• Don't Repeat Yourself or D.R.Y

HOC - Demo
• Demo
HelloHOC
HelloHOCContainer
HelloHOC
HelloHOCContainer
withSpinnerHOC

HOC Conventions (Do’s & Don’ts)
• Don’t Mutate the Original Component. Use
Composition. Ex.-
Component.prototype.componentDidMount = ()
=> {}
• Pass Unrelated Props Through to the Wrapped
Component
• Don’t Use HOCs Inside the render Method

HOC- Benefits
• Benefits of using HOCs:
– Reusability
– Cleaner Code
– Less prone to bugs

Forms
• Forms - a necessary evil in all applications
• It is almost impossible to imagine a web application
without forms
• Registration, Login, Search, Filter, Create or Update
all these operations need some kind of a form
implementation.

Form Types
Forms
Uncontrolled Input Controlled Input

Controlled Components
• UI in sync with the state
• React state becomes single source of truth
• Functions govern the data going into them on
every onChange event.
• unidirectional data flow

Forms

Demo

Form Libraries in React
• Formsy React
• Redux Forms
• Formik
• React Final Form

38

Hooks
• Hooks let you use state and other React features
without writing a class.
• Hooks are optional and backward compatible.
• Promotes the functional nature of javascript i.e.
promotes functional react components

Why Not Classes
• Need an understanding of all the lifecycle methods.
• Complex components become hard to understand.
• Classes confuse people (notorious this..)
• It’s hard to reuse stateful logic between classes

Why Hooks
• Hooks are our best shot at solving all of these
problems
• Hooks let us organize the logic inside a component
into reusable isolated units.
• Hooks let you always use functions instead of
having to constantly switch between functions,
classes, higher-order components

42

State Hook
In a functional component, we have no “state” properties, so we can’t assign or read
"this.state” Instead, we call the “useState” Hook directly inside our component to
declare a state variable.
• It declares a “state variable”
• The only argument to the useState() Hook is the initial state
• It returns a pair of values: the current state and a function that updates it.

44

Effect Hook
The Effect Hook lets you perform side effects in function components.Data fetching,
setting up a subscription, and manually changing the DOM in React components are
all examples of side effects.
1. By using this Hook, you tell React that your component needs to do something after
render.
2. Placing useEffect inside the component lets us access the state variable (or any props)
right from the effect.
– We don’t need a special API to read it — it’s already in the function scope.
– Hooks embrace JavaScript closures and avoid introducing React-specific APIs where
JavaScript already provides a solution.
3. By default, it runs both after the first render and after every update. However ,it can be
customised.

Custom Hooks
A custom Hook is a JavaScript function whose name starts with ”use” and that may call
other Hooks.
Unlike a React component, a custom Hook doesn’t need to have a specific signature. We
can decide what it takes as arguments, and what, if anything, it should return. In other
words, it’s just like a normal function.

Rules for using Hooks
1. Only call at top level (Not under any condition, loops or nested function)
2. Only call from react functional components(Not from regular js functions, or class
components.But you call them from custom hooks)

QUESTIONS?

THANK YOU

React advance

More Related Content

What's hot (16)

Similar to React advance (20)

Recently uploaded (20)

React advance