defaultProps

The defaultProps is a method that we can use to store as much information as we want
for a particular class.

This information can be accessed from anywhere inside that particular class.

Every piece of information you add inside the defaultProps, will be added as the prop of
that class.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Unidirectional Data Flow

Unidirectional data flow is a technique that is mainly found in functional reactive

programming.

It is also known as one-way data flow, which means the data has one, and only one
way to be transferred to other parts of the application.

In essence, this means child components are not able to update the data that is
coming from the parent component.

In React, data coming from a parent is called props.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 React doesn’t support bi-directional binding to make sure you are following a clean data
flow architecture.

The major benefit of this approach is that data flows throughout your app in a single
direction, giving you better control over it.

In terms of React it means:

• state is passed to the view and to child components

• actions are triggered by the view
• actions can update the state
• the state change is passed to the view and to child components

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 The view is a result of the application state. State changes when actions happen. When
actions happen, the state is updated.

One-way data binding provides us with some key advantages.

• Easier to debug, as we know what data is coming from where.

• Less prone to errors, as we have more control over our data.
• More efficient, as the library knows what the boundaries are of each part of the
system.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 In React, a state is always owned by one component.

Any changes made by this state can only affect the components below it, i.e its children.

Changing state on a component will never affect its parent or its siblings, only the children
will be affected.

This is the main reason that the state is often moved up in the component tree so that it
can be shared between the components that need to access it.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | State in React

What is State?

The state is an instance of React Component Class can be defined as an object of a

set of observable properties that control the behavior of the component.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 State of a component should prevail throughout the lifetime, thus we must first have
some initial state, to do so we should define the State in the constructor of the
component’s class.

Class MyClass extends React.Component

{
constructor(props)
{
super(props);
this.state = { attribute : "value" };
}
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 • State should never be updated explicitly.

• React provides its own method setState().

• setState() method takes a single parameter and expects an object which should
contain the set of values to be updated. Once the update is done the method
implicitly calls the render() method to repaint the page.

• State updates are independent.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 State

A state is a variable which exists inside a component, that cannot be accessed and
modified outside the component and can only be used inside the component.

Works very similarly to a variable that is declared inside a function that cannot be
accessed outside the scope of the function in normal javascript.

State Can be modified using this.setState.

State can be asynchronous.

Whenever this.setState is used to change the state class is rerender itself.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 // component
class MyComponent extends React.component{
state = {
name : ‘Ameya';
}
render(){
return <div>Hello {this.state.name}</div>
}
}

// simple js function
const MyFunction = () => {
let name = ‘Ameya';
console.log(`Hey ${name}`);
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | Implementing State &
Lifecycle

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video