=> React is a JavaScript library for building user interfaces. It was developed and is maintained by Meta (formerly Facebook) and has become one of the most popular tools for creating modern web applications.
=> 1.Component-Based Architecture:
-
React breaks the UI into reusable, independent pieces called components.
-
Components allow developers to build large applications by combining small, isolated pieces of UI.
2.Declarative:
-
You describe what the UI should look like, and React takes care of updating it when the data changes.
-
This makes code easier to read and debug.
3.Virtual DOM:
-
React uses a Virtual DOM (a lightweight copy of the real DOM) to efficiently manage UI updates.
-
It only updates the parts of the real DOM that need changes, leading to better performance.
4.Unidirectional Data Flow:
- Data flows from parent to child components, which makes state management predictable and easier to debug.
5.JSX (JavaScript XML):
-
React allows developers to write HTML-like syntax directly in JavaScript using JSX.
-
Example: Hello, World! is a JSX element.
6.State and Props:
-
State: Used for managing dynamic data in a component.
-
Props: Short for "properties," used to pass data from a parent to a child component.
7.Rich Ecosystem:
- React has a huge ecosystem of tools, libraries, and frameworks (like Next.js) for things like state management, routing, animations, and more.
-
Reusable Code: Components can be reused across different parts of the app.
-
Performance: Virtual DOM optimizes updates.
-
Community: Large developer community and extensive documentation.
-
Cross-Platform Development: React is the basis for React Native, which allows building mobile apps for iOS and Android.
-
React introduces concepts like JSX, components, props, state, and hooks, which can be challenging for beginners.
-
Understanding additional tools like Redux, Context API, or routing libraries may increase complexity.
- React is a library, not a full-fledged framework, so you need to rely on third-party tools for functionalities like routing (e.g., React Router) and state management (e.g., Redux, MobX, or Context API).
-
React applications rely heavily on client-side rendering, which can negatively impact SEO if not optimized properly.
-
Server-side rendering (SSR) solutions, like Next.js, are required to address this issue.
- React evolves rapidly, introducing new APIs, features, and deprecating older ones, which can be overwhelming for developers to keep up with.
- Managing state, handling lifecycle methods, and integrating third-party libraries can sometimes lead to verbose and complex code.
-
Improper state management or too many re-renders can cause performance bottlenecks in large-scale applications.
-
Optimization techniques like memoization or using React.memo are often necessary.
-
React requires external libraries for common tasks like form handling (e.g., react-hook-form), HTTP requests (e.g., Axios), or animations (e.g., GSAP or Framer Motion).
-
This can lead to dependency bloat and compatibility issues.
- React does not enforce a specific structure or approach, leaving developers with too many choices, which can lead to inconsistencies in large teams or projects.
- Setting up a React project often involves tools like Webpack, Babel, and ESLint, which can be daunting for beginners.
- For simple applications, React's overhead (e.g., the virtual DOM) might be excessive, making it less suitable for smaller or simpler projects.
-
JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows you to write HTML-like code directly in JavaScript, making it easier to define the structure of the UI.
-
JSX is not HTML; it's transformed into JavaScript under the hood (e.g., React.createElement). It improves readability and allows embedding dynamic data and logic using {}.
-
XML stands for eXtensible Markup Language
-
XML is a markup language much like HTML
-
XML was designed to store and transport data
-
XML was designed to be self-descriptive
-
XML is a W3C Recommendation
- Browsers can't read JSX because it is not valid JavaScript or HTML—it’s a syntax extension specifically for React. JSX needs to be transpiled (converted) into plain JavaScript using tools like Babel before it can be understood and executed by the browser.
React components are the building blocks of a React application. They are reusable, independent pieces of UI that define what should appear on the screen. Components can be thought of as JavaScript functions or classes that return React elements (JSX).
-
Functional Components:
- Simple JavaScript functions that return JSX.
Example:
- function Greeting() { return <> Hello, World!</>}
-
Class Components (less commonly used now):
- ES6 classes that extend React.Component.
Example:
- class Greeting extends React.Component { render() { return Hello, World!; }}
-
Reusable: Can be reused in different parts of the app.
-
Composable: Components can be nested within other components.
-
Isolated: Each component manages its own logic and state.
| Feature | Functional Component | Class Component |
|---|---|---|
| Definition | Simple JavaScript function that returns JSX. | ES6 class that extends React.Component. |
| State Management | Uses Hooks (e.g., useState, useEffect). | Manages state using this.state and setState(). |
| Lifecycle Methods | Handled with Hooks (e.g., useEffect). | Uses lifecycle methods (e.g., componentDidMount). |
| Syntax | cleaner and more concise. | More verbose and requires render() method. |
| Performance | Slightly faster (no overhead of classes). | Slightly slower due to class overhead. |
| Usage | Preferred in modern React development. | Mostly legacy; less common now. |
| Feature | Controlled Component | Uncontrolled Component |
|---|---|---|
| Definition | The component's state is fully controlled by React. | The component maintains its own internal state. |
| Data Handling | Data is managed through React's state and updated via props. |
Data is accessed directly from the DOM (e.g., refs). |
| Control | React has full control over the input's value. | React does not control the input's value directly. |
| Value Access | Value is accessed via state or onChange handlers. |
Value is accessed via refs (e.g., inputRef.current.value). |
| Example Use Case | Forms with validation, dynamic updates, or stricter control. | Simple forms where minimal React integration is needed. |
| Code Complexity | Requires more code to handle state and events. | Simpler code but less predictable behavior. |
| Feature | State | Props |
|---------------------|=----------------------------------------------------------|----------------------------------------------------------|
| Definition | A component's internal data that it manages itself. | Data passed to a component from its parent component. |
| Mutability | Mutable: Can be updated with setState or Hooks like useState. | Immutable: Cannot be changed by the receiving component. |
| Scope | Scoped to the component that owns and manages it. | Available to child components via props. |
| Usage | Used for managing dynamic data that changes over time. | Used for passing data or methods between components. |
| Updates | Can trigger re-renders when updated. | Cannot trigger re-renders directly (changes depend on the parent). |
| Example Use Case| Form inputs, toggles, counters, etc. | Titles, configuration options, event handlers, etc. |
| Access | Accessed with this.state (class) or useState (function). | Accessed with this.props (class) or function arguments. |
Hooks are special functions in React that let you use state and lifecycle features in functional components, eliminating the need for class components. Introduced in React 16.8, hooks make it easier to manage component logic and reuse stateful logic across components.
-
Basic Hooks:
-
useState: Manages state in functional components.
-
useEffect: Handles side effects like data fetching, subscriptions, or DOM manipulations.
-
useContext: Accesses values from React's Context API.
-
-
Additional Hooks:
-
useReducer: A more advanced way to manage state using reducers, similar to Redux.
-
useRef: Accesses or manipulates DOM elements and persists values across renders.
-
useMemo: Memoizes expensive calculations to improve performance.
-
useCallback: Memoizes callback functions to prevent unnecessary re-creations.
-
useLayoutEffect: Similar to useEffect, but fires synchronously after DOM updates.
-
-
Custom Hooks:
- Developers can create their own hooks to reuse logic (e.g., a custom hook for form handling or data fetching).
-
Simplify code by using functional components.
-
Reuse stateful logic through custom hooks.
-
Eliminate complex patterns like higher-order components (HOCs) and render props.
useState is a React Hook used to manage state in functional components. It lets you define a state variable and a function to update it.
-
state: The current state value.
-
setState: A function to update the state.
-
initialValue: The initial value of the state.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0); // Initialize state with 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
- When setCount is called, React re-renders the component with the updated state.
useEffect is a React Hook used to handle side effects in functional components, such as data fetching, subscriptions, or DOM manipulation.
-
effectFunction: A function that contains the side effect logic.
-
dependencies: An array of variables that determine when the effect should re-run. If empty ([]), the effect runs only once after the initial render.
import React, { useState, useEffect } from "react";
export function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval); // Cleanup to avoid memory leaks
}, []); // Run only once after the initial render
return <p>Timer: {seconds} seconds</p>;
}
-
useState:
-
Manages component-specific state.
-
Triggers a re-render when the state changes.
-
-
useEffect:
-
Runs after render, handling side effects.
-
Dependencies ensure it runs only when necessary.
-
Can return a cleanup function to handle unmounting or cleanup logic.
-
Together, useState and useEffect allow functional components to handle dynamic behavior and side effects like class component
The key prop in React is a special attribute used to uniquely identify elements in a list. It helps React efficiently update and render components when the list changes by identifying which items have been added, removed, or updated.
-
Efficient Reconciliation:
-
React uses keys during its reconciliation process to differentiate between items and determine which parts of the DOM need to be updated.
-
Without a unique key, React will re-render the entire list, which can hurt performance.
-
-
Avoiding Bugs:
- When keys are not unique or are missing, React may reuse DOM elements incorrectly, leading to unexpected UI behavior (e.g., incorrect state in reused components).
-
Improved Performance:
- Unique keys allow React to optimize rendering by only updating the affected elements instead of re-rendering the whole list.
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li> // Use a unique identifier
))}
</ul>
);
}
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.text}</li> // Index is not unique and can cause bugs
))}
</ul>
);
}
-
Keys should be unique for each element within a list.
-
Use a stable identifier (like id) instead of an array index to avoid potential issues.
-
Keys are critical for React's internal mechanisms but have no effect on the visual output.
Lifting up the state is a concept in React where the state is moved from a child component to a common parent component. This is done when multiple components need to share the same state, allowing them to communicate and synchronize data.
In React, each component manages its own state locally. However, when two or more child components need access to the same state or need to interact with each other, lifting the state up to their nearest common ancestor is an effective way to solve the issue.
By lifting state up, the parent component can manage the state and pass it down to the child components as props. This ensures that the state is shared across components, and updates to it are reflected in all components that depend on it.
-
Move the state from the child components to the common parent.
-
The parent component holds the state and provides functions to modify it.
-
The parent passes the state and any functions to update it as props to the child compon
function Counter({ count, increment }) {
return <button onClick={increment}>Increment: {count}</button>;
}
function Display({ count }) {
return <h1>Current Count: {count}</h1>;
}
function App() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<Counter count={count} increment={increment} />
<Display count={count} />
</div>
);
}
-
Lifting state up makes it possible for child components to share and synchronize data.
-
The parent component manages the state and passes it down via props to the child components.
-
This pattern helps keep components declarative and ensures that the data flow is controlled.
By using lifting state up, React components can communicate efficiently without having to pass data deeply through multiple layers of components.
In React, there are several ways to pass data between components, depending on the relationship between them. The most common methods are props, state lifting, and context. Here's an overview:
Props (short for "properties") are the primary way to pass data from a parent component to a child component. Props are read-only, meaning that a child component cannot modify the props it receives.
function Parent() {
const message = "Hello from Parent!";
return <Child message={message} />;
}
function Child({ message }) {
return <h1>{message}</h1>;
}
-
Parent passes the message as a prop to Child.
-
Child receives the prop as a parameter and uses it in its rendering.
When a child component needs to send data to a parent component (or multiple child components need to share state), you lift the state up to the common parent and pass a callback function from the parent to the child. The child calls this function to send data back to the parent.
function Parent() {
const [message, setMessage] = useState("");
const handleMessageChange = (newMessage) => {
setMessage(newMessage);
};
return (
<div>
<Child onMessageChange={handleMessageChange} />
<p>{message}</p>
</div>
);
}
function Child({ onMessageChange }) {
return (
<input
type="text"
onChange={(e) => onMessageChange(e.target.value)}
placeholder="Type a message"
/>
);
}
-
Parent holds the state message and passes handleMessageChange as a prop to Child.
-
Child updates the message state by calling the passed onMessageChange function.
For deeply nested components or when props need to be passed down multiple levels, you can use React Context. Context allows you to share values across the component tree without explicitly passing props through every level.
const MessageContext = React.createContext();
function Parent() {
const [message, setMessage] = useState("Hello from Parent!");
return (
<MessageContext.Provider value={{ message, setMessage }}>
<Child />
</MessageContext.Provider>
);
}
function Child() {
return <GrandChild />;
}
function GrandChild() {
const { message, setMessage } = useContext(MessageContext);
return (
<div>
<p>{message}</p>
<button onClick={() => setMessage("Updated by GrandChild!")}>Change Message</button>
</div>
);
}
-
MessageContext.Provider in the Parent provides the state and setter function.
-
useContext in GrandChild consumes the context value, allowing access to the state and the function to update it.
While less common for passing regular data, refs can be used to directly access a child component or DOM element. This is typically used for focusing input elements, triggering animations, etc.
function Parent() {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus(); // Directly focus the input element
};
return (
<div>
<Child ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
const Child = React.forwardRef((props, ref) => {
return <input ref={ref} />;
});
- forwardRef is used in the Child to pass the ref down from the Parent.
-
Props: Used to pass data from parent to child.
-
State Lifting: Used to send data from child to parent by moving the state to a common ancestor.
-
Context: Provides a way to share data between components at any level of the tree without passing props manually.
-
Ref: Provides a way to access child components or DOM elements directly.
Each method serves a different use case, and it's important to choose the right one based on the complexity of the data flow in your application.
React 18 introduced several new features and improvements, with a focus on performance and concurrent rendering. Here are the most notable features:
-
Concurrent Rendering enables React to work on multiple tasks at once. It makes React apps feel more responsive by allowing React to interrupt rendering work to keep the UI responsive.
-
React can now suspend rendering and resume it later, enabling smoother transitions and updates, especially for large apps with heavy content.
-
To opt-in to concurrent rendering, use the createRoot API instead of the previous ReactDOM.render.
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
-
React 18 introduces automatic batching of updates, meaning multiple state updates (even from different event handlers or async operations) can be batched together to avoid unnecessary re-renders and improve performance.
-
This works across all React events, including setTimeout, Promises, and more.
import { useState } from 'react';
function Component() {
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
const updateStates = () => {
setState1(prev => prev + 1);
setState2(prev => prev + 1);
};
return <button onClick={updateStates}>Update States</button>;
}
- In React 18, both state updates will be batched together, improving rendering performance.
-
React 18 expands the Suspense API to work with data fetching. This allows you to suspend rendering while waiting for data (e.g., from an API) and show a loading state until the data is ready.
-
Concurrent rendering helps make the waiting process smoother and less blocking.
import { Suspense } from 'react';
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<DataFetchingComponent />
</Suspense>
);
}
-
The useId hook generates unique IDs that are stable across server and client renders, which helps with accessibility and ensures the IDs are consistent during hydration (in server-side rendering).
-
This is useful for managing form elements, modals, and components that need unique identifiers.
import { useId } from 'react';
function Form() {
const id = useId();
return <input id={id} />;
}
-
React 18 introduced the ability to use concurrent rendering on the server side through Server-Side Rendering (SSR). This allows React to stream HTML to the client in chunks, improving performance for large apps.
-
Streaming SSR helps pages load faster by allowing browsers to start rendering parts of the page while other parts are still being generated on the server.
-
Transitions allow React to differentiate between urgent and non-urgent updates, enabling more efficient rendering. Non-urgent updates can be delayed until the browser is idle, making UI interactions feel faster and smoother.
-
The startTransition API enables you to mark updates as "non-urgent", which can then be deferred.
import { startTransition } from 'react';
function handleChange(event) {
startTransition(() => {
setInput(event.target.value); // Non-urgent update
});
}
-
In React 18, ReactDOM's createRoot API is introduced as the primary way to initialize a React app. This API provides a more modern approach to rendering the app and automatically enables new features like concurrent rendering.
-
The new API should be used instead of ReactDOM.render.
-
React 18 improves server-side rendering (SSR) and hydration by making the process faster and more efficient. It enables rendering of content incrementally from the server and hydration (attaching event handlers to HTML) in a more optimized manner.
-
This ensures that React apps are faster to load on the client side after being served from the server.
-
React 18 improves SSR by enabling streaming server-rendered HTML to the client in chunks.
-
This helps improve performance for large applications and decreases time-to-first-byte (TTFB).
-
This hook allows React to safely subscribe to external stores (like Redux or other state management libraries) and ensure that state is updated in sync with React’s rendering process.
-
It provides a reliable API for external state synchronization, which helps avoid issues like inconsistent UI or layout shifts.