Lecture 61 :- React Advanced - Class 3

In "React Advanced - Class 3," we'll continue exploring more advanced React concepts and build on what we learned in the previous classes. We'll cover topics such as React context, error boundaries, and advanced hooks like useReducer and useRef.

Step 1: React Context

React Context provides a way to pass data through the component tree without having to pass props down manually at every level. It allows you to create a global state accessible to all components within a specific context.

Creating a Context:

jsxCopy code

// ThemeContext.js import { createContext, useState } from 'react'; const ThemeContext = createContext(); export const ThemeProvider = ({ children }) => {  const [theme, setTheme] = useState('light');  return (    <ThemeContext.Provider value={{ theme, setTheme }}>      {children}    </ThemeContext.Provider>  ); }; export default ThemeContext;

In this example, we created a ThemeContext using createContext and provided a ThemeProvider component that wraps its children with the ThemeContext.Provider. It holds the theme state and the setTheme function as the value of the context.

Using the Context:

jsxCopy code

// App.js import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import { ThemeProvider } from './ThemeContext'; import Home from './Home'; import About from './About'; import Products from './Products'; function App() {  return (    <Router>      <ThemeProvider>        <div>          <h1>Hello, React!</h1>          <nav>            <ul>              <li>                <Link to="/">Home</Link>              </li>              <li>                <Link to="/about">About</Link>              </li>              <li>                <Link to="/products">Products</Link>              </li>            </ul>          </nav>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />          <Route path="/products" component={Products} />        </div>      </ThemeProvider>    </Router>  ); } export default App;

In this example, we wrapped the entire application with the ThemeProvider to make the theme state and setTheme function accessible to all child components.

Step 2: Error Boundaries

Error boundaries are components that catch JavaScript errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. They help prevent the entire application from crashing due to errors in specific components.

jsxCopy code

// ErrorBoundary.js import React, { Component } from 'react'; class ErrorBoundary extends Component {  state = {    hasError: false,  };  static getDerivedStateFromError(error) {    return { hasError: true };  }  componentDidCatch(error, errorInfo) {    // You can log the error to an error reporting service    console.error('Error:', error);    console.error('Error Info:', errorInfo);  }  render() {    if (this.state.hasError) {      return <div>Something went wrong!</div>;    }    return this.props.children;  } } export default ErrorBoundary;

Using the Error Boundary:

Wrap the components you want to be covered by the error boundary using the ErrorBoundary component.

jsxCopy code

// App.js import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import { ThemeProvider } from './ThemeContext'; import Home from './Home'; import About from './About'; import Products from './Products'; import ErrorBoundary from './ErrorBoundary'; function App() {  return (    <Router>      <ThemeProvider>        <div>          <h1>Hello, React!</h1>          <nav>            <ul>              <li>                <Link to="/">Home</Link>              </li>              <li>                <Link to="/about">About</Link>              </li>              <li>                <Link to="/products">Products</Link>              </li>            </ul>          </nav>          <ErrorBoundary>            <Route exact path="/" component={Home} />            <Route path="/about" component={About} />            <Route path="/products" component={Products} />          </ErrorBoundary>        </div>      </ThemeProvider>    </Router>  ); } export default App;

In this example, we wrapped the Route components with the ErrorBoundary to catch any errors that may occur during rendering.

Step 3: useReducer Hook

The useReducer hook is an alternative to useState that allows you to handle more complex state logic. It uses a reducer function to update the state based on dispatched actions.

jsxCopy code

import React, { useReducer } from 'react'; const initialState = { count: 0 }; const reducer = (state, action) => {  switch (action.type) {    case 'INCREMENT':      return { count: state.count + 1 };    case 'DECREMENT':      return { count: state.count - 1 };    default:      return state;  } }; const Counter = () => {  const [state, dispatch] = useReducer(reducer, initialState);  return (    <div>      <h2>Count: {state.count}</h2>      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>    </div>  ); }; export default Counter;

In this example, we use useReducer to manage the state of the Counter component. The reducer function handles different actions (INCREMENT and DECREMENT) to update the state.

Step 4: useRef Hook

The useRef hook allows you to create a mutable reference that persists across renders. It is useful for accessing DOM elements, managing previous state values, and avoiding unnecessary re-renders.

jsxCopy code

import React, { useRef } from 'react'; const InputWithFocus = () => {  const inputRef = useRef(null);  const handleClick = () => {    inputRef.current.focus();  };  return (    <div>      <input type="text" ref={inputRef} />      <button onClick={handleClick}>Focus Input</button>    </div>  ); }; export default InputWithFocus;

In this example, we use useRef to create a reference to the input element. When the button is clicked, the handleClick function sets the focus on the input element using the focus() method.

Congratulations! You've completed the third class of React Advanced. You've learned about React context, error boundaries, using the useReducer and useRef hooks.

React offers a vast array of tools and techniques to build powerful and performant applications. As you continue your React journey, you can explore more advanced topics such as server-side rendering (SSR), integrating with state management libraries like Redux, using custom hooks, and exploring more complex use cases of context.

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