[go: up one dir, main page]
Scribd
Upload
12 views8 pages

REACT

React is a JavaScript library for building user interfaces, particularly single-page applications, using a component-based architecture that promotes reusability and efficiency through features like the virtual DOM and JSX syntax. Hooks, introduced in React 16.8, allow functional components to manage state and lifecycle features, enhancing their flexibility and power. Common hooks include useState, useEffect, and useContext, which simplify code, improve reusability, and make state management more intuitive.

Uploaded by

ssui2663
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views8 pages

REACT

React is a JavaScript library for building user interfaces, particularly single-page applications, using a component-based architecture that promotes reusability and efficiency through features like the virtual DOM and JSX syntax. Hooks, introduced in React 16.8, allow functional components to manage state and lifecycle features, enhancing their flexibility and power. Common hooks include useState, useEffect, and useContext, which simplify code, improve reusability, and make state management more intuitive.

Uploaded by

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

REACT JS

React is a JavaScript library developed by Facebook for building user interfaces, specifically
single-page applications (SPAs) where you need a fast, interactive experience. It allows
developers to build web applications by creating reusable UI components that update and
render efficiently in response to data changes.

Here’s why React is so popular and widely used:

1. Component-based architecture: React lets you build encapsulated components


that manage their own state and can be composed into complex UIs. This modularity
promotes reusability and maintainability.

2. Virtual DOM: React uses a virtual DOM (a lightweight in-memory representation of


the actual DOM) to optimize updates. When the state of a component changes, React
updates only the necessary parts of the UI rather than the entire page, leading to faster
performance.

3. Declarative UI: React makes it easier to design UIs by using a declarative approach.
You describe how the UI should look for a given state, and React takes care of updating
the DOM when that state changes, reducing the need for manual DOM manipulation.

4. JSX Syntax: React uses JSX, a syntax that allows you to write HTML elements within
JavaScript. This makes it easier to work with and understand, especially for developers
familiar with HTML and JavaScript.

5. Cross-platform Development: With React Native, you can use your React
knowledge to build mobile apps for iOS and Android, making React a versatile choice
for both web and mobile development.
A Hook is a feature in React that allows you to "hook into" React state and lifecycle features
from functional components. Before hooks were introduced in React 16.8, you could only use
state and lifecycle methods in class components. Hooks allow functional components to have
the same capabilities, making them more powerful and flexible.
Here’s a breakdown of the most commonly used hooks:
1. useState:
o This hook allows you to add state to functional components.

o It returns an array where the first element is the current state value, and the
second element is a function to update that state.
Javascript-
const [count, setCount] = useState(0);

2. useEffect:
o This hook lets you perform side effects in functional components (like fetching
data, subscribing to events, or manually changing the DOM).
o It's similar to lifecycle methods like componentDidMount, componentDidUpdate,
and componentWillUnmount in class components.
Javascript-

REACT.STRICTMODE RUNS YOUR CODE TWICE IN DEVELOPMENT,1 FOR CHECKING 2


TIME FOR DISPLAYING

3. useContext:
o This hook allows you to subscribe to React context, making it easier to share
global state across the app without having to pass props manually through each
level of the component tree.
javascript
const theme = useContext(ThemeContext);
or
import React, { createContext, useContext } from 'react';
// Create context
const MyContext = createContext();
function App() {
return (
// Provide value
<MyContext.Provider value="Hello, World!">
<Child />
</MyContext.Provider>
);
}
function Child() {
// Consume value with useContext
const value = useContext(MyContext);
return <div>{value}</div>;
}

export default App;


4. useReducer:
o This hook is an alternative to useState when you have more complex state logic.
It’s often used when you need to manage state that depends on previous state
values or involves multiple sub-values.
o It’s similar to how Redux works but built into React.

javascript
const [state, dispatch] = useReducer(reducer, initialState);

5. useRef:
o This hook lets you persist values between renders without causing a re-render
when the value changes. It’s often used for accessing DOM elements directly or
keeping a reference to a value that doesn’t trigger a re-render.
javascript
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}
return (
<button onClick={handleClick}>
Click me!
</button>

6. useMemo and useCallback:


o These hooks optimize performance by memorizing values or functions so that
they aren’t recalculated on every render unless certain dependencies change.
o useMemo is used for expensive calculations, and useCallback is used for
functions that should only be recreated when their dependencies change.
import React, { useState, useMemo } from 'react';
function App() {
const [count, setCount] = useState(0);
// useMemo to memoize the expensive calculation
const expensiveValue = useMemo(() => {
console.log("Calculating expensive value...");
return count * 2; // Just an example of an expensive calculation
}, [count]); // Only re-calculate when `count` changes
return (
<div>
<p>Count: {count}</p>
<p>Expensive Value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default App;
Why use Hooks?
 Simplified Code: Hooks allow functional components to manage state and side effects
without needing class components, resulting in more concise and readable code.
 Better Reusability: You can encapsulate logic in custom hooks and reuse it across
components.
 Easier to Understand: Functional components are simpler, and hooks enable you to
manage state and side effects in a more predictable, linear way compared to class
lifecycle methods.

You might also like