REACT STATE AND PROPS
BY CHAITANYA SAWANT
REACT STATE
State is a built-in object in React components that holds data or
information about the component. It is mutable, which means it can be
updated within the component using the setState method in class
components or the useState hook in functional components.
• State is local to the component and cannot be accessed by child
components unless passed down as props.
• It is mutable, meaning it can change over time based on user
interactions or API responses.
• When state updates, the component re-renders to reflect the changes.
• Managed using useState in functional components or this.setState in
class components.
STATE SYNTAX
const [stateVariable, setStateFunction] = useState(initialValue);
• stateVariable is the name you'll use to access the current state.
• setStateFunction is the function you call to update the state.
• useState is the React Hook.
• initialValue is the default value for the state.
PROGRAM
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() =>
setCount(count+1)}>Increment</button
>
</div>
);
}
export default Counter;
ADVANTAGES
• Encapsulation: State allows a component to manage its own data, making
it self-contained and reusable. This data is private and can only be updated
by the component itself.
• Dynamism: It enables components to be dynamic and interactive. When
state changes, the component automatically re-renders to reflect the new
data, creating a responsive user experience.
• Component Lifecycle Management: State changes are a core part of the
component lifecycle. Many effects and side-effects (like fetching data) are
triggered when state is updated.
DISDVANTAGES
• Complexity: Overusing state or improperly managing it can lead to
complex, hard-to-debug components.
• Reactivity: A change in state only re-renders the component where the
state is declared and its child components. This can be a disadvantage if
many unrelated components need to be updated by a single state change,
requiring a more complex state management solution.
• Performance Overhead: While React is efficient, frequent and
unnecessary state updates can lead to performance issues, especially in
large applications with many components.
PROPS IN REACT
Props (short for Properties) are used to pass data from a parent
component to a child component. Unlike state, props are
immutable, meaning they cannot be modified within the
receiving component.
• Props allow components to be reusable and dynamic.
• Props are read-only and cannot be changed by the child
component.
• They help in data communication between components.
• Passed as attributes in JSX elements.
PROGRAM
import React from 'react';
function Greeting({ name }) {
return <h1>Hello,
{name}!</h1>;
}
function App() {
return <Greeting
name=“SAM" />;
}
export default App;
ADVANTAGES
• Data Flow: Props provide a simple and unidirectional flow of
data from parent to child components, making it easy to
understand how data is passed and where it originates.
• Reusability: By accepting props, components become highly
reusable. You can use the same component in different places
with different data, simply by passing different props
• .
• Predictability: The data passed through props is immutable
within the child component. This predictability makes
components easier to test and reason about.
DISADVANTAGES
• Limited Scope: Props only facilitate parent-to-child communication. You
can't directly pass props from a child to a parent or between sibling
components without using a shared parent.
• Rigid Structure: The unidirectional flow of props, while an advantage for
predictability, can become a disadvantage when you need more flexible
communication between components that are not in a direct parent-child
relationship. This often necessitates a state management library.
COMPARISON
THANKYOU!!
