Scribd
Upload
11 views

React Concepts Summary

The document outlines key concepts of React.js, including the Virtual DOM, Hooks, Lifecycle Methods, and Redux. It explains how the Virtual DOM optimizes updates, details core and custom Hooks for state management, and describes lifecycle methods for class and functional components. Additionally, it covers Redux principles, including the store, actions, and reducers, with examples of usage in React applications.

Uploaded by

Alwani Anis
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

React Concepts Summary

The document outlines key concepts of React.js, including the Virtual DOM, Hooks, Lifecycle Methods, and Redux. It explains how the Virtual DOM optimizes updates, details core and custom Hooks for state management, and describes lifecycle methods for class and functional components. Additionally, it covers Redux principles, including the store, actions, and reducers, with examples of usage in React applications.

Uploaded by

Alwani Anis
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

React.

js Key Concepts: Virtual DOM, Hooks, Lifecycle Methods, Redux

---
1. Virtual DOM
- Lightweight copy of the real DOM.
- React updates the real DOM efficiently by comparing changes in the virtual DOM.
- Example:
```javascript
const element = <h1>Hello, Virtual DOM!</h1>;
ReactDOM.render(element, document.getElementById('root'));
```

---
2. Hooks
### Core Hooks
- **useState**: Manage state.
```javascript
const [count, setCount] = useState(0);
```

- **useEffect**: Manage side effects.


```javascript
useEffect(() => {
console.log('Component mounted');
return () => console.log('Component unmounted');
}, [dependencyArray]);
```

- **useContext**: Access context.


```javascript
const value = useContext(MyContext);
```

- **useReducer**: Handle complex state logic.


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

### Custom Hooks


- Reusable logic for components.
```javascript
const useFetchData = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
};
```

---
3. Lifecycle Methods

### Class Components


#### Mounting
- **constructor**: Initialize state.
- **componentDidMount**: Run after component is inserted into DOM.
```javascript
componentDidMount() {
console.log("Component mounted");
}
```

#### Updating
- **shouldComponentUpdate**: Optimize rendering.
- **componentDidUpdate**: Triggered after updates.
```javascript
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
console.log("Value updated");
}
}
```

#### Unmounting
- **componentWillUnmount**: Cleanup tasks.
```javascript
componentWillUnmount() {
console.log("Component will unmount");
}
```

### Functional Components


- Use **useEffect** for lifecycle behaviors.
```javascript
useEffect(() => {
console.log("Mounted");
return () => console.log("Unmounted");
}, []);
```

---
4. Redux Key Concepts

### Core Principles


1. Single source of truth: State stored in the **store**.
2. State is read-only: Updated via actions.
3. Changes via pure reducers.

### Example
- **Store**: Holds the state.
```javascript
const store = createStore(reducer);
```

- **Actions**: Describe what to do.


```javascript
const increment = { type: "INCREMENT" };
```

- **Reducer**: Pure function to update state.


```javascript
const counterReducer = (state = 0, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
default:
return state;
}
};
```

- **React-Redux**:
- **useSelector**: Access state.
```javascript
const count = useSelector((state) => state.counter);
```
- **useDispatch**: Dispatch actions.
```javascript
const dispatch = useDispatch();
dispatch(increment());
```

---
This summary provides an overview of React's core features with examples. For
detailed implementations, use the snippets in actual projects.

You might also like