Scribd
Upload
3 views

08-State,useEffect,String binding

The document discusses state management in React components, emphasizing the use of mutable state through the useState() hook and various client-side techniques. It explains the stateless nature of HTTP and the need for state management across requests, detailing hooks like useEffect for managing component lifecycle. Additionally, it covers string binding in React, highlighting the differences between React and JavaScript binding expressions.

Uploaded by

Suraj Ingole
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

08-State,useEffect,String binding

The document discusses state management in React components, emphasizing the use of mutable state through the useState() hook and various client-side techniques. It explains the stateless nature of HTTP and the need for state management across requests, detailing hooks like useEffect for managing component lifecycle. Additionally, it covers string binding in React, highlighting the differences between React and JavaScript binding expressions.

Uploaded by

Suraj Ingole
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Note: Variables are not recommended to handle data for component.

Variables are immutable and component can't handle data with immutable

reference.

State in Component

- Web applications use "HTTP" or "HTTPS" as protocol.


- HTTP is state less protocol.
- State less nature of HTTP is good for server as it manages the memory with less
overload.
- It is not good to handle data across requests as server can't remember the data
across requests.
- Hence web application require various "State Management" techniques.
- State Management is classified into 2 types
a) Client Side State
b) Server Side State
- React uses various client side state management techniques
a) Query String
b) Local Storage
c) Session Storage
d) Cookies
- React also provides state for "Virtual DOM".
- React provides various "Hooks" [functions] to manage state for a component

a) useState()
b) useContext()
c) useRef()
d) useMemo()
e) useCallBack()
f) useReducer()
etc..

- State is mutable.
- The local state is defined by using "useState()" hook.
- Local state is configured while creating the component and destroyed when user
navigates to another component.

Syntax:
import { useState } from "react";

const [getter, setter] = useState();

- useState() will allocate memory for component, which is controlled by accessors


a) getter : to read value from memory [state].
b) setter : to assign value into memory [state].

FAQ's:

1. Why developers prefer using "const" for configuring useState?


A. State must be initialized for a component, which is secured and safe for memory.
let & var allows assignment, which is not good for state.

2. If you configure state using const how you will assign a new value?
A. const will not allow assignment, but allows changing the value in memory by re-
initializing the memory. Setter re-initializes the memory and stores a new value
into state.

Syntax:
var [name, setName] = useState();

setName = newname; // invalid

setName(newname); // valid - re-initializing

3. When to setState ?
A. State can't set values while creating a component. You have to configure values
into state after component is created, which can be "mount" or any element
event.

4. How to define a mount phase for component in React?


A. By using "useEffect()" hook.

Syntax:
useEffect(()=>{

}, [ dependencies ]);

useEffect(function(){ }, [ ]);

Note: useEffect() can handle 2 phases


a) Mount
b) Unmount

Every component mounts only once, you have to define the dependency to
mount again. You can configure multiple dependencies for a component.

Ex:
data-binding.jsx

import { useEffect, useState } from "react";

export function DataBinding(){

const [price, setPrice] = useState(40000.44);

useEffect(()=>{

setPrice(70000.44);

},[])

return(
<div>
<h2>Data Binding</h2>
Price : { price }
</div>
)
}

Binding String Type


- ES5+ versions support string with
a) Single Quote ' '
b) Double Quote " "
c) Backtick ` `
- Backtick allows a string with embedded expression.
- Data binding embedded expression is defined by using "${ }"

Syntax:
`string ${expression}`

FAQ: What is difference between "{ }" & "${ }" ?


Ans:
{ } react binding expression for JSX
${ } JavaScript binding expression for string with backtick.

Ex:
data-binding.jsx

import { useEffect, useState } from "react";

export function DataBinding(){

const [productName, setProductName] = useState();


const [bgStyle, setBgStyle] = useState('');

useEffect(()=>{

setProductName("Samsung TV");
setBgStyle('bg-warning');

}, []);

return(
<div className="container-fluid">
<h2 className={`text-center text-danger ${bgStyle}`} >Data Binding</h2>
<dl>
<dt>Name</dt>
<dd>{productName}</dd>
</dl>
</div>
)
}

- All JS string methods are same to use in React.


a) String Formatting
b) String Manipulation

Formatting:
bold(), italics(), fontsize(), fontcolor(), toUpperCase(), toLowerCase()
etc..

Manipulation:
length, indexOf(), lastIndexOf(), charAt(), charCodeAt(), match(), slice(),
substring(), substr(), etc..

You might also like