Lecture 59 :- React Advanced - Class 1

In "React Advanced - Class 1," we'll dive deeper into advanced React concepts and explore techniques to optimize performance, handle asynchronous actions, and work with React hooks.

Step 1: React Performance Optimization

Performance optimization is crucial for building fast and responsive React applications. Some common techniques to optimize React performance include:

• Memoization: Use React.memo to memoize components and prevent unnecessary re-renders when their props don't change.
• UseCallback and UseMemo: Use useCallback to memoize functions and useMemo to memoize computed values to avoid expensive computations on every render.
• Virtualization: Implement virtualization techniques like windowing or infinite scrolling to render only the visible portion of a large list, reducing the number of DOM elements.
• Code Splitting: Use code splitting with tools like React.lazy and React Suspense to load components on-demand, reducing the initial bundle size.
• Web Workers: Offload expensive computations to web workers to keep the main UI thread responsive.

Step 2: Handling Asynchronous Actions with Redux Thunk

Redux Thunk is a middleware for Redux that enables handling asynchronous actions in Redux. It allows you to dispatch functions instead of plain objects, giving you more flexibility in handling async operations like API calls.

Install Redux Thunk:

To use Redux Thunk, you need to install the package:

bashCopy code

npm install redux-thunk

Step 3: Using Redux Thunk

Let's modify our previous Redux store setup to include Redux Thunk.

In store.js, import applyMiddleware and thunk from redux-thunk:

jsxCopy code

import { createStore, combineReducers, applyMiddleware } from 'redux'; import themeReducer from './reducers/themeReducer'; import thunk from 'redux-thunk'; const rootReducer = combineReducers({  theme: themeReducer, }); const store = createStore(rootReducer, applyMiddleware(thunk)); export default store;

Now, you can create async actions with Redux Thunk:

jsxCopy code

// themeActions.js export const toggleTheme = () => {  return {    type: 'TOGGLE_THEME',  }; }; export const toggleThemeAsync = () => {  return (dispatch) => {    // Simulate async action, like API call or server request    setTimeout(() => {      dispatch(toggleTheme());    }, 1000); // Dispatch the toggleTheme action after 1 second  }; };

Step 4: Using React Hooks - useContext

The useContext Hook allows you to access the Redux store without having to use the connect higher-order component. It is especially useful for functional components that need to consume data from the Redux store.

jsxCopy code

import React, { useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { toggleTheme, toggleThemeAsync } from './actions/themeActions'; import { ThemeContext } from './ThemeContext'; function Button({ text }) {  const dispatch = useDispatch();  const theme = useSelector((state) => state.theme);  const { setTheme } = useContext(ThemeContext);  const handleClick = () => {    dispatch(toggleTheme());  };  const handleAsyncClick = () => {    dispatch(toggleThemeAsync());  };  const handleContextClick = () => {    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));  };  return (    <div>      <button onClick={handleClick} style={{ padding: '10px 20px', fontSize: '16px' }}>        {text} (Redux)      </button>      <button onClick={handleAsyncClick} style={{ padding: '10px 20px', fontSize: '16px' }}>        {text} (Async)      </button>      <button onClick={handleContextClick} style={{ padding: '10px 20px', fontSize: '16px' }}>        {text} (Context)      </button>      <h3>Current Theme: {theme}</h3>    </div>  ); } export default Button;

Step 5: Using React Hooks - useState and useEffect

React hooks like useState and useEffect can also be used for managing local component state and handling side effects within functional components.

jsxCopy code

import React, { useState, useEffect } from 'react'; function Counter() {  const [count, setCount] = useState(0);  useEffect(() => {    // Code to run after component render    console.log('Component rendered');    // Code to run on component unmount    return () => {      console.log('Component unmounted');    };  }, []);  const increment = () => {    setCount((prevCount) => prevCount + 1);  };  return (    <div>      <h2>Count: {count}</h2>      <button onClick={increment}>Increment</button>    </div>  ); } export default Counter;

Step 6: Using React.memo for Memoization

Use the React.memo higher-order component to memoize functional components and prevent unnecessary re-renders.

jsxCopy code

import React from 'react'; const ListItem = React.memo(({ name }) => {  return <li>{name}</li>; }); export default ListItem;

By wrapping the ListItem component with React.memo, the component will only re-render if its name prop changes.

Congratulations! You've completed the first class of React Advanced. You've learned about React performance optimization, handling asynchronous actions with Redux Thunk, and using React hooks like useContext, useState, and useEffect.

React offers a vast ecosystem of tools and libraries to build highly performant and scalable applications. As you continue your React journey, you can explore more advanced topics like React context, custom hooks, and integrating React with state management libraries like Redux or MobX.

Keep practicing, building more complex applications, and exploring the vast possibilities of React! Happy coding!