- React.js is an open-source JavaScript library created by Facebook for building modern, interactive user interfaces, primarily for single-page applications (SPAs). It allows developers to build web applications that can update and render efficiently based on data changes, without requiring a page reload.
function Welcome() {
return <h1>Hello, React!</h1>;
}
- Here, we are creating a simple React component that renders a "Hello, React!" message. This component is reusable and can be plugged into any part of a larger application
- Component-based architecture: UI is divided into small, reusable pieces called components. Each component can have its own logic and state.
- Virtual DOM: React creates a virtual representation of the DOM and updates only the parts that have changed, making the update process faster.
- Declarative: React allows you to describe what the UI should look like at any point in time, and it automatically updates when the data changes.
- Unidirectional data flow: Data flows from parent components to child components, making the application easier to debug and reason about.
- Reusable components: Write once, reuse anywhere. This reduces redundancy and increases maintainability.
- Fast performance: With the Virtual DOM, React can efficiently update and render components only when necessary.
- SEO-friendly: React can be rendered on the server side (with libraries like Next.js), making applications more SEO-friendly compared to traditional client-side rendering.
- Strong ecosystem: React has a large community and a rich ecosystem of tools, libraries, and resources, making it easier to build, test, and maintain React applications.
- JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML elements directly within JavaScript code. JSX makes the code more readable and expressive.
const element = <h1>Hello, World!</h1>;
- JSX allows you to write this HTML-like syntax directly in JavaScript files. The above JSX code is compiled into a React.createElement() call that creates a React element.
- JSX uses JavaScript expressions: You can insert JavaScript expressions inside JSX using curly braces {}.
- JSX has slight syntax differences: For example, you use className instead of class, and all tags must be closed (even self-closing tags like
).
- JSX is compiled: JSX isn't understood by the browser directly; it gets transformed into JavaScript functions by Babel before it is executed.
const name = "React";
const element = <h1>Hello, {name}!</h1>; // "Hello, React!"
- The Virtual DOM is an in-memory representation of the real DOM elements. React uses the Virtual DOM to track changes in the UI and efficiently update the real DOM without redrawing the entire page. This reduces the number of expensive operations on the real DOM, improving performance.
- When the state or props of a React component change, React creates a new Virtual DOM tree. It then compares this new tree with the previous one (a process called "diffing"). Only the parts of the DOM that have changed are updated in the real DOM, making the update process efficient.
- Virtual DOM: Exists in memory and is a lightweight copy of the real DOM. It allows React to make updates without directly interacting with the real DOM, which is a slow process.
- Real DOM: Represents the actual DOM structure on the webpage. Any update to the real DOM requires re-rendering of the page, which is slower.
- Components are the building blocks of a React application. Each component represents a part of the UI. Components can be either simple (like a button) or complex (like a form). A component can accept inputs (called props) and maintain its own state.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}- In this example, Welcome is a functional component that receives a name prop and renders a greeting message.
- Functional Components: These are basic components that are JavaScript functions and do not have their own state or lifecycle methods. They receive props as an argument and return JSX.
- Class Components: These components are ES6 classes that extend React.Component. They can have their own state and lifecycle methods.
- Example of a class component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- In class components, the render() method is required. It returns the JSX that defines how the UI should look. Every time a component’s state or props change, the render() method is called to update the UI.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- key is used in lists of components to uniquely identify each item. This helps React efficiently update and reorder elements in the list when the data changes.
const items = ['Apple', 'Banana', 'Cherry'];
const itemList = items.map((item, index) => <li key={index}>{item}</li>);
- Keys help React identify which elements have changed, been added, or been removed. Without keys, React would re-render the entire list, leading to poor performance. Keys provide stability to the list and help avoid unnecessary DOM operations.
- A functional component is a JavaScript function that takes props as an argument and returns a React element (JSX). Functional components are simple and stateless by nature, but with React hooks, they can now manage state and lifecycle events.
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
- A class component is a more traditional way to define a React component using ES6 classes. Class components can hold state and have access to lifecycle methods, making them more feature-rich than functional components (before React Hooks were introduced).
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- Props (short for properties) are inputs passed from a parent component to a child component. Props are read-only and cannot be modified by the child component. They allow components to be dynamic and reusable.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}- Props are passed to a component as attributes in JSX. The component receives them as an argument and can render dynamic content based on them.
<Welcome name="John" />- State is an internal object in a class component or a functional component (with hooks) that holds data that can change over time. Unlike props, state is mutable and is typically used for data that changes in response to user actions or other events.
class Counter extends React.Component {
state = { count: 0 };
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}- Props: Passed from parent to child and cannot be changed by the child component (read-only).
- State: Managed within the component and can be updated using setState().
- You can update the state using the setState() method. This method merges the new state with the existing state and triggers a re-render of the component.
this.setState({ count: this.state.count + 1 });- setState() is used to update the component’s state. When setState() is called, React schedules a re-render of the component with the new state. This ensures the UI is in sync with the state.
this.setState({ name: 'John' });
-
The lifecycle of a React component can be divided into three phases:
-
Mounting: When the component is first created and inserted into the DOM.
-
Updating: When the component's state or props change, and it needs to re-render.
-
Unmounting: When the component is removed from the DOM.
- Lifecycle methods are special methods that are called at different stages of a component’s lifecycle. They allow developers to hook into these stages and execute custom logic.
- componentDidMount(): Called after the component is inserted into the DOM.
- componentDidUpdate(): Called after the component is re-rendered due to state or prop changes.
- componentWillUnmount(): Called before the component is removed from the DOM.
- componentDidMount() is invoked immediately after a component is mounted (inserted into the DOM). It’s commonly used for making network requests or initializing third-party libraries.
componentDidMount() {
fetch('/api/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}- componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. It's used for cleanup tasks like clearing timers or unsubscribing from event listeners.
componentWillUnmount() {
clearInterval(this.timer);
}
- componentDidUpdate() is called after a component has re-rendered due to changes in props or state. This is useful for responding to updates, such as making additional network requests when certain conditions are met.
- shouldComponentUpdate() allows you to control whether a component should re-render or not when state or props change. It’s often used to optimize performance by preventing unnecessary re-renders.
shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value; // only re-render if the value changes
}
- componentWillMount() is called before the component is rendered (but it’s deprecated).
- componentDidMount() is called after the component has been rendered and inserted into the DOM, making it a safer place for code that relies on the DOM being available.
- The constructor() method is used to initialize the state and bind methods to the component instance in a class component. It's the first method called when a component is instantiated.
constructor(props) {
super(props); // Must call super() before accessing 'this'
this.state = { count: 0 };
}- super() is required in a constructor when extending a class. It calls the constructor of the parent class (React.Component), giving the child component access to this and props.
constructor(props) {
super(props); // Calls the parent class's constructor
this.state = { count: 0 };
}-
React Hooks are functions that allow you to "hook into" React features, such as state and lifecycle methods, in functional components. Hooks were introduced in React 16.8 to make functional components more powerful, eliminating the need to write class components in many cases.
-
For example, the useState hook enables you to add local state to a functional component, while useEffect allows you to perform side effects like fetching data or subscribing to events.
import { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
// Cleanup the timer when component unmounts
return () => clearInterval(timer);
}, []);
return <h1>Timer: {count}</h1>;
}-
useState is a hook that lets you add state to functional components. It returns two values: the current state and a function to update that state.
-
You can think of state as data that can change over time. useState helps you handle such data changes in a React component.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
</div>
);
}- Here, count is the state variable, and setCount is the function used to update it.
- useEffect is a hook that lets you perform side effects in function components, such as fetching data, directly manipulating the DOM, or setting up subscriptions. It is similar to lifecycle methods in class components, such as componentDidMount, componentDidUpdate, and componentWillUnmount.
import { useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(result => setData(result));
// Optional cleanup function
return () => {
console.log('Cleanup when component unmounts');
};
}, []); // Empty array ensures this runs only once after the initial render
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}- Here, useEffect fetches data after the component renders, and the empty dependency array ensures the effect runs only once.
- useContext is a hook that allows you to consume values from a React Context without the need for prop drilling (passing data through multiple layers of components).
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Button with {theme} theme</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}- In this example, ThemedButton can access the theme directly from ThemeContext without needing to pass it as a prop from the parent.
- useReducer is a hook that is used to handle more complex state logic in React components. It’s similar to useState but allows for more control by using reducers (functions that determine changes to state based on actions).
import { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}- useReducer is a good alternative to useState when the state logic becomes complex, such as when multiple values depend on each other.
- useRef returns a mutable object whose .current property persists across re-renders. It’s commonly used to access DOM elements or store values that don’t need to trigger a re-render when updated.
import { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}- Here, useRef is used to access the input DOM element and trigger the focus on button click without causing a re-render.
- useCallback is a hook that returns a memoized version of a callback function, which means it will only recreate the function if its dependencies change. This is useful for optimizing performance, particularly in scenarios involving expensive operations or when passing functions as props.
import { useState, useCallback } from 'react';
function Button({ onClick }) {
console.log('Button rendered');
return <button onClick={onClick}>Click me</button>;
}
function App() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<Button onClick={handleClick} />
</div>
);
}- useCallback prevents the handleClick function from being recreated on every render unless count changes, thus avoiding unnecessary re-renders of the Button component.
- useMemo is a hook that memoizes the result of a computation. It recomputes the memoized value only when one of its dependencies changes, which helps optimize performance by preventing expensive calculations on every render.
import { useMemo, useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const expensiveCalculation = (num) => {
console.log('Expensive calculation');
return num * 2;
};
const result = useMemo(() => expensiveCalculation(count), [count]);
return (
<div>
<p>Result: {result}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
- Here, useMemo memoizes the result of expensiveCalculation, preventing it from running on every render unless count changes.
- Custom hooks are functions that encapsulate reusable logic built using React’s built-in hooks like useState, useEffect, and others. Custom hooks let you reuse logic across multiple components.
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const savedValue = localStorage.getItem(key);
return savedValue !== null ? JSON.parse(savedValue) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
function App() {
const [name, setName] = useLocalStorage('name', '');
return (
<div>
<input value={name} onChange={(e) => setName(e.target.value)} />
</div>
);
}- In this example, the useLocalStorage custom hook allows any component to easily manage state that syncs with localStorage.
- Custom hooks are created by writing a function that uses other hooks (such as useState, useEffect, etc.) and begins with the prefix use.
function useDocumentTitle(title) {
useEffect(() => {
document.title = title;
}, [title]);
}
function App() {
useDocumentTitle('My App Title');
return <div>Check the document title!</div>;
}- This custom hook useDocumentTitle allows you to change the document title from any component without duplicating logic.
-
useEffect should be used when you want to perform side effects in your component. A side effect refers to anything that affects something outside the component, like fetching data from an API, updating the DOM (Document Object Model), or setting up a subscription.
-
It runs after the component renders.
-
It’s ideal for tasks that don’t affect the layout on the screen, like fetching data or subscribing to services.
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
}, []); // The empty array means this will only run once after the component mounts.-
The dependency array is the second argument passed to useEffect. It controls when the useEffect hook runs. If you want the effect to run every time certain variables change, you place those variables inside the dependency array.
-
Empty array []: Runs the effect only once, when the component mounts.
-
Variables in the array: Runs the effect when any of those variables change.
useEffect(() => {
console.log('This runs every time count changes');
}, [count]); // This effect runs only when `count` changes.- Side effects, such as updating the DOM, setting timers, fetching data, etc., are handled using useEffect in React.
Example: If you want to update the document title based on a state change, you would use useEffect to handle that side effect.
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`; // This side effect updates the document title.
}, [count]); // The effect will re-run when `count` changes.- useEffect: Runs after the DOM is painted. It’s asynchronous and non-blocking, so the browser doesn't wait for it to complete before rendering the page.
- useLayoutEffect: Runs synchronously before the browser paints the screen. This means the browser will wait for useLayoutEffect to finish before displaying content.
- Use useLayoutEffect when you need to measure the DOM and make changes that affect layout (like animations or reading element dimensions).
useEffect(() => {
console.log('useEffect: Runs after the DOM is painted');
});
useLayoutEffect(() => {
console.log('useLayoutEffect: Runs before the DOM is painted');
});- Yes, you can use multiple hooks in a single component. Hooks are just functions, so you can call as many as you need in your component.
function MyComponent() {
const [count, setCount] = useState(0); // useState hook
const [name, setName] = useState(''); // useState hook
useEffect(() => { // useEffect hook
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<input value={name} onChange={(e) => setName(e.target.value)} />
</div>
);
}- In functional components, the useState hook is used to manage state. It allows you to create state variables and update them.
function Counter() {
const [count, setCount] = useState(0); // useState creates a state variable `count`
function increment() {
setCount(count + 1); // Update the state using `setCount`
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>Increment</button>
</div>
);
}- The cleanup function in useEffect is used to clean up any side effects (like subscriptions, timers, or event listeners) when the component is unmounted or before the effect re-runs. The cleanup function is optional and returned from the useEffect function.
useEffect(() => {
const interval = setInterval(() => {
console.log('This runs every second');
}, 1000);
// Cleanup function: clears the interval when the component unmounts
return () => clearInterval(interval);
}, []); // Runs only once when the component mounts- In this example, the interval is cleared when the component is unmounted to prevent memory leaks.
- In React, components communicate by passing data between them. The primary way to do this is by using props to pass data from a parent component to a child component. For communication from child to parent, you can pass a function as a prop.
- Data is passed from a parent to a child component using props.
function Parent() {
const message = "Hello from Parent!";
return <Child data={message} />;
}
function Child({ data }) {
return <div>{data}</div>;
}- In this example, the Parent component passes the string "Hello from Parent!" to the Child component through the data prop.
- You pass data from a child to a parent by passing a function as a prop from the parent, and calling that function in the child with the data.
function Parent() {
const handleData = (childData) => {
console.log(childData); // Logs "Data from Child"
};
return <Child sendData={handleData} />;
}
function Child({ sendData }) {
return <button onClick={() => sendData("Data from Child")}>Send Data</button>;
}