From 612ae93235d6271a25fe8efafe56a3cdb612b86b Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Tue, 13 Aug 2024 03:14:22 +0530 Subject: [PATCH 01/20] Update ReducerTutorial.js --- src/UseReducer/ReducerTutorial.js | 62 +++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/src/UseReducer/ReducerTutorial.js b/src/UseReducer/ReducerTutorial.js index ac18def..a87a5c3 100644 --- a/src/UseReducer/ReducerTutorial.js +++ b/src/UseReducer/ReducerTutorial.js @@ -32,3 +32,65 @@ const ReducerTutorial = () => { }; export default ReducerTutorial; + +/* +what steps happen after Button Click:- + +Button Click Event: +The user clicks the button labeled "Click Here". This triggers the onClick event handler defined for the button. + + // onClick: Event handler for button clicks + // setCount: Updates the 'count' state + // Increments count by 1 on each button click + + ); +} + +export default EffectTutorial; +// export default: Makes EffectTutorial available for import elsewhere + + +Initial trigger and operations: + +1. Initial Trigger: Component Mount + The initial trigger for code execution is the component mounting. + This is evident from the empty dependency array `[]` in the `useEffect` hook. + +2. Operations: + a. When the component mounts, the `useEffect` hook runs. + b. Inside `useEffect`, an axios GET request is made to fetch comments from the API. + c. When the API responds, the email from the first comment is extracted and stored in the `data` state using `setData`. + d. "API WAS CALLED" is logged to the console. + e. The component renders, displaying "Hello World", the fetched email (`data`), and the initial count (0). + f. After initial render, the button becomes interactive. Each click increments the `count` state, triggering a re-render with the updated count value. + +Note that the API call only happens once when the component mounts, while the button can be clicked multiple times to update the count independently. + + +*/ From 0d85b29e8614dc2b8a7398273bbe53ceb84e07ca Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Thu, 15 Aug 2024 18:49:36 +0530 Subject: [PATCH 04/20] Update LayoutEffectTutorial.js Differences useLayoutEffect runs synchronously immediately after React has performed all DOM mutations. useEffect runs asynchronously after the browser has painted the updates. --- src/UseLayoutEffect/LayoutEffectTutorial.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/UseLayoutEffect/LayoutEffectTutorial.js b/src/UseLayoutEffect/LayoutEffectTutorial.js index a8d9e2a..09ea734 100644 --- a/src/UseLayoutEffect/LayoutEffectTutorial.js +++ b/src/UseLayoutEffect/LayoutEffectTutorial.js @@ -19,3 +19,20 @@ function LayoutEffectTutorial() { } export default LayoutEffectTutorial; + +/* + +The component uses useRef to create a reference to the input element. +useLayoutEffect is used to log the initial value of the input synchronously after render. +useEffect is used to change the input's value asynchronously after the browser paint. +The input element is rendered with an initial value of "PEDRO" and styled inline. + +useLayoutEffect runs synchronously immediately after React has performed all DOM mutations. +useEffect runs asynchronously after the browser has painted the updates. +This sequence demonstrates how useLayoutEffect can be used for measurements or updates +that need to happen before the browser paints, preventing potential visual flickers. + +In real-world applications, directly manipulating DOM elements (as done here with inputRef.current.value) +should generally be avoided in favor of React's declarative state management. + +*/ From 076618e8ab0ee04f9fca382d2c57267d02f057b0 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Fri, 16 Aug 2024 01:12:38 +0530 Subject: [PATCH 05/20] Update Button.js Button is Child component --- src/UseImperativeHandle/Button.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/UseImperativeHandle/Button.js b/src/UseImperativeHandle/Button.js index 40c630a..f2e8a31 100644 --- a/src/UseImperativeHandle/Button.js +++ b/src/UseImperativeHandle/Button.js @@ -1,9 +1,25 @@ import React, { forwardRef, useImperativeHandle, useState } from "react"; +// These are imports from the React library. forwardRef is used for ref forwarding, +// useImperativeHandle for customizing the instance value exposed to parent components, and +// useState for managing component state. +// These imported functions will be used to create a functional component with ref forwarding and +// state management capabilities. const Button = forwardRef((props, ref) => { + // forwardRef is a higher-order component that allows the component to receive a ref and + // pass it further down to a child component. + // It's used here to create a functional component that can receive a ref as a second argument. + const [toggle, setToggle] = useState(false); - + // useState is a React hook that allows functional components to have state. + // It returns an array with the current state value and a function to update it. + // It's used here to create a 'toggle' state variable initialized to false, and a 'setToggle' function to update it. + useImperativeHandle(ref, () => ({ + // useImperativeHandle customizes the instance value that is exposed to parent components when using ref. + // It's used here to create a method 'alterToggle' that can be called from its parent component, namely, ImperativeHandle + // to change the 'toggle' state. + alterToggle() { setToggle(!toggle); }, @@ -12,8 +28,13 @@ const Button = forwardRef((props, ref) => { <> {toggle && Toggle} + // This is the JSX returned by the component. It uses conditional rendering with the '&&' operator. + // It renders a button and conditionally renders a span element based on the 'toggle' state. ); }); export default Button; +// Button is Child component +// This statement exports the Button component as the default export of this module. +// It allows other files to import this component. From 0f08bcd3ae24d193abdbc3925cbf16d191c81f4f Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Fri, 16 Aug 2024 01:20:34 +0530 Subject: [PATCH 06/20] Update ImperativeHandle.js ImperativeHandle is Parent component --- src/UseImperativeHandle/ImperativeHandle.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/UseImperativeHandle/ImperativeHandle.js b/src/UseImperativeHandle/ImperativeHandle.js index b4abcb8..b02837a 100644 --- a/src/UseImperativeHandle/ImperativeHandle.js +++ b/src/UseImperativeHandle/ImperativeHandle.js @@ -1,9 +1,22 @@ import React, { useRef } from "react"; import Button from "./Button"; +// These are imports. +// useRef is a hook that provides a way to persist values between renders. +// useRef will be used to create a ref, and the Button component is imported from the previous file. function ImperativeHandle() { + // This declares a functional component named ImperativeHandle. + // This component will use the Button component and demonstrate the use of imperative handle. + const buttonRef = useRef(null); + // useRef creates a mutable ref object whose .current property is initialized to the passed argument (null). + // It's used to create a ref that will be passed to the Button component. + return ( + // This is the JSX returned by the ImperativeHandle component. It includes an event handler and ref passing. + // It renders a button that, when clicked, calls the alterToggle method on the Button component. + // It also renders the Button component, passing the buttonRef to it. +
+ ); +} +``` + +## Lifting State Up + +Used when multiple components need to share state. + +### How it works: +1. Move the state to the closest common ancestor. +2. Pass the state and setter function as props to child components. + +### Example: + +```jsx +// Parent Component +function Parent() { + const [data, setData] = useState(''); + + return ( +
+

Data: {data}

+ +
+ ); +} + +// Child Component +function Child({ setData }) { + return ( + setData(e.target.value)} + /> + ); +} +``` + +## Context API + +Useful for deep component trees to avoid prop drilling. + +### How it works: +1. Create a context using React.createContext(). +2. Wrap parent component with Context.Provider. +3. Use useContext hook in child components to access and update the context value. + +### Example: + +```jsx +// Create context +const DataContext = React.createContext(); + +// Parent Component +function Parent() { + const [data, setData] = useState(''); + + return ( + +
+

Data: {data}

+ +
+ + ); +} + +// Child Component +function Child() { + const { setData } = useContext(DataContext); + + return ( + setData(e.target.value)} + /> + ); +} +``` + +## Custom Events + +Less common, but useful in certain scenarios, especially with complex component hierarchies. + +### How it works: +1. Create a custom event in the child component. +2. Dispatch the event with data. +3. Listen for the event in the parent component. + +### Example: + +```jsx +// Parent Component +function Parent() { + useEffect(() => { + const handleChildEvent = (e) => { + console.log('Received from child:', e.detail); + }; + + window.addEventListener('CHILD_EVENT', handleChildEvent); + + return () => { + window.removeEventListener('CHILD_EVENT', handleChildEvent); + }; + }, []); + + return ; +} + +// Child Component +function Child() { + const sendDataToParent = () => { + const event = new CustomEvent('CHILD_EVENT', { detail: 'Hello from child!' }); + window.dispatchEvent(event); + }; + + return ; +} +``` + +## Refs with useImperativeHandle + +Allows a parent component to call methods on a child component. + +### How it works: +1. Use forwardRef to create the child component. +2. Use useImperativeHandle in the child to expose methods to the parent. +3. Create a ref in the parent and pass it to the child. + +### Example: + +```jsx +// Child Component +const Child = forwardRef((props, ref) => { + const [data, setData] = useState(''); + + useImperativeHandle(ref, () => ({ + getChildData: () => data + })); + + return setData(e.target.value)} />; +}); + +// Parent Component +function Parent() { + const childRef = useRef(); + + const getDataFromChild = () => { + console.log('Child data:', childRef.current.getChildData()); + }; + + return ( +
+ + +
+ ); +} +``` + +## Conclusion + +Each method has its use cases, advantages, and trade-offs. Choose the appropriate method based on your specific requirements, component structure, and the complexity of your application. + +Remember, while these methods enable child-to-parent communication, it's generally recommended to keep the data flow primarily top-down in React applications for better predictability and easier debugging. From d092e31fc2a614b1f47a0b3f795d85fbafc57652 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 01:09:30 +0530 Subject: [PATCH 09/20] usage of React Context for state management across components without prop drilling --- src/UseContext/README.md | 55 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/UseContext/README.md diff --git a/src/UseContext/README.md b/src/UseContext/README.md new file mode 100644 index 0000000..b285883 --- /dev/null +++ b/src/UseContext/README.md @@ -0,0 +1,55 @@ +# React Context Tutorial + +This project demonstrates the usage of React Context for state management across components without prop drilling. + +## Components + +1. `ContextTutorial`: The main component that provides the context. +2. `Login`: A component with an input field to update the username. +3. `User`: A component that displays the current username. + +## Key Concepts + +- [React Context](https://react.dev/reference/react/createContext): For sharing data between components without explicit prop passing. +- [useState Hook](https://react.dev/reference/react/useState): For adding state to functional components. +- [useContext Hook](https://react.dev/reference/react/useContext): For consuming context in child components. + +## Operations + +1. **ContextTutorial Component Mount**: + - Initializes `username` state with an empty string. + - Wraps child components with `AppContext.Provider`. + +2. **Login Component Mount**: + - Accesses `setUsername` function from AppContext. + - Renders an input field for username entry. + +3. **User Component Mount**: + - Accesses `username` value from AppContext. + - Displays the current username. + +4. **User Input in Login Component**: + - `onChange` event triggers `setUsername`. + - Updates `username` state in ContextTutorial. + +5. **State Update in ContextTutorial**: + - `AppContext.Provider` value updates. + - Triggers re-render of Login and User components. + +6. **User Component Re-render**: + - Displays updated username value. + +## Usage + +To use this example: + +1. Clone the repository. +2. Install dependencies with `npm install`. +3. Run the app with `npm start`. + +## Further Reading + +- [React Documentation](https://react.dev/learn) +- [Using the Context API in React](https://react.dev/learn/passing-data-deeply-with-context) +- [Hooks API Reference](https://react.dev/reference/react) + From e93ad6f4c0758287ef53f09bf7c4c647db453fdf Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 01:18:26 +0530 Subject: [PATCH 10/20] Update README.md the use of React Context API for state management across components without prop drilling --- src/UseContext/README.md | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/UseContext/README.md b/src/UseContext/README.md index b285883..b21f496 100644 --- a/src/UseContext/README.md +++ b/src/UseContext/README.md @@ -8,6 +8,24 @@ This project demonstrates the usage of React Context for state management across 2. `Login`: A component with an input field to update the username. 3. `User`: A component that displays the current username. +### ContextTutorial + +This is the main component that sets up the AppContext and manages the username state. It wraps the child components (Login and User) with the AppContext.Provider. + +### Login + +This component renders an input field where users can enter a username. It uses the useContext hook to access the setUsername function from AppContext. + +### User + +This component displays the current username. It uses the useContext hook to access the username value from AppContext. + +## How it Works + +1. The ContextTutorial component creates a state for the username and provides it to child components via AppContext.Provider. +2. The Login component allows users to input a username, which updates the state in ContextTutorial. +3. The User component displays the current username, which updates automatically when the state changes. + ## Key Concepts - [React Context](https://react.dev/reference/react/createContext): For sharing data between components without explicit prop passing. @@ -18,25 +36,27 @@ This project demonstrates the usage of React Context for state management across 1. **ContextTutorial Component Mount**: - Initializes `username` state with an empty string. - - Wraps child components with `AppContext.Provider`. + - Wraps child components with `AppContext.Provider`, passing down `username` state and `setUsername` function. 2. **Login Component Mount**: - Accesses `setUsername` function from AppContext. - Renders an input field for username entry. 3. **User Component Mount**: - - Accesses `username` value from AppContext. - - Displays the current username. + - Accesses `username` value from AppContext using `useContext`. + - Displays the current username (initially empty). 4. **User Input in Login Component**: - - `onChange` event triggers `setUsername`. - - Updates `username` state in ContextTutorial. + - `onChange` event triggers when user types in the input field. + - Calls `setUsername` with the new input value. + - Updates `username` state in `ContextTutorial` component. 5. **State Update in ContextTutorial**: - `AppContext.Provider` value updates. - Triggers re-render of Login and User components. 6. **User Component Re-render**: + - Receives updated `username` value from context. - Displays updated username value. ## Usage From fc39caae2faa388669d31c289a4954e05a1bed43 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 17:02:12 +0530 Subject: [PATCH 11/20] React hooks useMemo for optimizing performance in a React application --- src/UseMemo/README.md | 96 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/UseMemo/README.md diff --git a/src/UseMemo/README.md b/src/UseMemo/README.md new file mode 100644 index 0000000..ed7ace5 --- /dev/null +++ b/src/UseMemo/README.md @@ -0,0 +1,96 @@ +# React Memo Tutorial + +This project demonstrates the use of React hooks, particularly `useMemo`, for optimizing performance in a React application. + +## Key Elements/Keywords + +1. **React Hooks**: Functions that let you use state and other React features without writing a class. + + - `useState`: A Hook that lets you add React state to function components. + - "useState is a Hook that lets you add React state to function components. [...] It returns a pair: the current state value and a function that lets you update it." + - To manage 'data' and 'toggle' states in this component. + + - `useEffect`: A Hook for performing side effects in function components. + - "The Effect Hook lets you perform side effects in function components. [...] If you're familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined." + - To fetch data from an API when the component mounts. + + - `useMemo`: A Hook that memoizes expensive computations. + - "useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render." + - To memoize the result of findLongestName function. + +2. **Axios**: A popular, promise-based HTTP client for making requests. + - To make a GET request to fetch data from an API. + +3. **Conditional Rendering**: The ability to render different UI based on certain conditions. + - To conditionally render an h1 element based on the 'toggle' state. + +4. **Event Handling**: The method of running a function in response to an event. + - Used in the onClick event of the Toggle button. + +## Operations + +1. Initial Component Mount: + - The component is rendered for the first time. + - 'data' state is initialized as null. + - 'toggle' state is initialized as false. + - useEffect hook triggers an API call to fetch comments. + - useMemo initializes but doesn't compute (as data is null). + - The component renders with an empty longest name and the Toggle button. + +2. API Call Completion: + - The API call completes and the response is received. + - 'data' state is updated with the fetched comments using setData. + - This state update triggers a re-render of the component. + - useMemo now computes findLongestName with the new data. + - The component re-renders, displaying the longest name. + +3. Toggle Button Click: + - User clicks the Toggle button. + - setToggle is called, flipping the 'toggle' state. + - This state update triggers another re-render. + - useMemo checks its dependencies and sees that 'data' hasn't changed, so it doesn't recompute. + - The component re-renders, potentially showing/hiding the "toggle" h1 element. + +4. Subsequent Toggle Button Clicks: + - Each click flips the 'toggle' state and causes a re-render. + - useMemo continues to return the memoized value without recomputation. + - Only the conditional rendering of the "toggle" h1 changes. + +This demonstrates how useMemo optimizes performance by avoiding unnecessary recalculations of the findLongestName function when only the unrelated 'toggle' state changes. + +## Usage + +To use this component in your React project: + +1. Install necessary dependencies (react, axios). +2. Copy the MemoTutorial component into your project. +3. Import and use the MemoTutorial component in your app. + +Example: + +```jsx +import MemoTutorial from './path/to/MemoTutorial'; + +function App() { + return ( +
+ +
+ ); +} +``` + +This project serves as a practical example of using React hooks for state management and performance optimization. + +## React Documentation References + +For more detailed information on the React concepts used in this project, refer to the following official React documentation: + +1. React Hooks: https://reactjs.org/docs/hooks-intro.html +2. useState: https://reactjs.org/docs/hooks-state.html +3. useEffect: https://reactjs.org/docs/hooks-effect.html +4. useMemo: https://reactjs.org/docs/hooks-reference.html#usememo +5. Conditional Rendering: https://reactjs.org/docs/conditional-rendering.html +6. Handling Events: https://reactjs.org/docs/handling-events.html + +These resources provide comprehensive explanations and examples for each concept, which can help in deeper understanding and more effective use of React in your projects. \ No newline at end of file From 023c98fd7952c0eb32510911872d0e4675ffb9c1 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 17:16:46 +0530 Subject: [PATCH 12/20] To demonstrate the usage of all these hooks in one place Note that this component is overly complex and not practical for real-world use. It's designed solely to demonstrate the usage of all these hooks in one place. In a real application, you would typically use only the hooks necessary for your specific use case, and often in separate components or custom hooks. --- src/all-hooks-demo.js | 131 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 src/all-hooks-demo.js diff --git a/src/all-hooks-demo.js b/src/all-hooks-demo.js new file mode 100644 index 0000000..76beca4 --- /dev/null +++ b/src/all-hooks-demo.js @@ -0,0 +1,131 @@ +import React, { + useState, useReducer, useContext, useRef, useImperativeHandle, + useEffect, useLayoutEffect, useInsertionEffect, useMemo, useCallback, + useTransition, useDeferredValue, useDebugValue, useId, useSyncExternalStore +} from 'react'; + +// Assume these are defined elsewhere +import { ThemeContext, createConnection, filterTodos, expensiveCalculation, subscribeToStore } from './helpers'; + +const initialState = { count: 0 }; +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(); + } +} + +const AllHooksDemo = React.forwardRef((props, ref) => { + // useState + const [text, setText] = useState(''); + + // useReducer + const [state, dispatch] = useReducer(reducer, initialState); + + // useContext + const theme = useContext(ThemeContext); + + // useRef + const inputRef = useRef(null); + + // useImperativeHandle + useImperativeHandle(ref, () => ({ + focusInput: () => inputRef.current?.focus() + })); + + // useEffect + useEffect(() => { + const connection = createConnection(); + connection.connect(); + return () => connection.disconnect(); + }, []); + + // useLayoutEffect + useLayoutEffect(() => { + // Measure layout + console.log('Layout effect ran'); + }, []); + + // useInsertionEffect + useInsertionEffect(() => { + // Insert dynamic CSS + const style = document.createElement('style'); + style.innerHTML = `body { background-color: ${theme.background}; }`; + document.head.appendChild(style); + return () => document.head.removeChild(style); + }, [theme]); + + // useMemo + const expensiveResult = useMemo(() => expensiveCalculation(state.count), [state.count]); + + // useCallback + const memoizedCallback = useCallback(() => { + console.log('Callback called with count:', state.count); + }, [state.count]); + + // useTransition + const [isPending, startTransition] = useTransition(); + + // useDeferredValue + const deferredText = useDeferredValue(text); + + // useDebugValue + useDebugValue(text, text => `Current text: ${text}`); + + // useId + const uniqueId = useId(); + + // useSyncExternalStore + const storeState = useSyncExternalStore(subscribeToStore, () => store.getState()); + + // Event handlers + const handleTextChange = (e) => { + setText(e.target.value); + startTransition(() => { + // Simulate expensive operation + for (let i = 0; i < 1000000; i++) {} + }); + }; + + return ( +
+ +

Deferred text: {deferredText}

+

Count: {state.count}

+ + +

Expensive calculation result: {expensiveResult}

+

Store state: {JSON.stringify(storeState)}

+ {isPending &&

Updating...

} +
+ ); +}); + +export default AllHooksDemo; + +/* + +Here's a breakdown of how each hook is used: + +useState: Manages the 'text' state. +useReducer: Manages a 'count' state with increment/decrement actions. +useContext: Accesses a theme from a ThemeContext. +useRef: Creates a reference to the input element. +useImperativeHandle: Exposes a 'focusInput' method to parent components. +useEffect: Simulates connecting/disconnecting to an external system. +useLayoutEffect: Logs a message after layout calculations. +useInsertionEffect: Dynamically inserts CSS based on the theme. +useMemo: Memoizes the result of an expensive calculation. +useCallback: Memoizes a callback function. +useTransition: Marks state updates as transitions for better performance. +useDeferredValue: Creates a deferred version of the text input. +useDebugValue: Provides a debug label for custom hooks (though this isn't a custom hook, it's used for demonstration). +useId: Generates a unique ID for the input element. +useSyncExternalStore: Subscribes to an external store. +useActionState: This hook is not included in the example. + +Note that this component is overly complex and not practical for real-world use. It's designed solely to demonstrate the usage of all these hooks in one place. In a real application, you would typically use only the hooks necessary for your specific use case, and often in separate components or custom hooks. + + +*/ From 8a3d07450c69c6ac48ada9c3f16bc5bdc7ba2856 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 22:29:49 +0530 Subject: [PATCH 13/20] Provides a step-by-step explanation of how the React components are initialized, rendered, and updated, including the specific actions taken by React at each stage. Provides a step-by-step explanation of how the React components are initialized, rendered, and updated, including the specific actions taken by React at each stage: Initial mounting of CallBackTutorial State initialization Creation of memoized callback Rendering of Child component Effect execution User interaction Re-rendering process --- src/UseCallback/README.md | 102 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 src/UseCallback/README.md diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md new file mode 100644 index 0000000..f46cf28 --- /dev/null +++ b/src/UseCallback/README.md @@ -0,0 +1,102 @@ +# useCallback Tutorial + +## Important concepts + +### useState +A Hook that lets you add React state to function components. +- `const [toggle, setToggle] = useState(false);`: Manages the toggle state for showing/hiding an h1 element. +- `const [data, setData] = useState("Yo, pls sub to the channel!");`: Stores a string message used in the returnComment function. + +### useCallback +A Hook that lets you cache a function definition between re-renders. +- `const returnComment = useCallback((name) => { return data + name; }, [data]);`: Memoizes the returnComment function, preventing unnecessary re-renders of the Child component unless the 'data' dependency changes. + +### useEffect +A Hook that lets you perform side effects in function components. +- `useEffect(() => { console.log("FUNCTION WAS CALLED"); }, [returnComment]);`: Logs a message to the console whenever the returnComment function reference changes, demonstrating when the Child component re-renders. + +### Child Component +A component that is nested within another component (the parent component). +- ``: Renders the Child component in CallBackTutorial.js, passing the memoized returnComment function as a prop. +- The entire Child.js file defines a child component that receives and uses the returnComment prop. + +## Operations + +First is the mounting of the CallBackTutorial component. + +Then, +1. CallBackTutorial component starts mounting: + - React processes the import statements, bringing in necessary dependencies (axios, useState, useCallback, and the Child component). + +2. Function component CallBackTutorial is defined and executed: + - `useState(false)` is called to initialize the `toggle` state: + - React creates a state variable `toggle` with initial value `false`. + - React creates a setter function `setToggle`. + - `useState("Yo, pls sub to the channel!")` is called to initialize the `data` state: + - React creates a state variable `data` with the initial string value. + - React creates a setter function `setData`. + +3. `useCallback` is executed: + - React creates a memoized version of the `returnComment` function. + - The function is memoized with `data` as a dependency, meaning it will only be recreated if `data` changes. + +4. The JSX in the return statement of CallBackTutorial is evaluated: + - React processes the JSX, creating a virtual DOM representation. + +5. Child component is encountered in the JSX: + - React sees ``. + - It prepares to render the Child component, passing the memoized `returnComment` function as a prop. + +6. Child component starts rendering: + - The function component Child is executed with `returnComment` prop. + - `useEffect` in Child is encountered: + - React schedules this effect to run after the render is committed to the screen. + - The JSX in Child's return statement is evaluated: + - `returnComment("Pedro")` is called, concatenating "Pedro" to the current value of `data`. + - The result is placed within a `
`. + +7. React completes the initial render of both components: + - The virtual DOM is created for the entire component tree. + - React commits this to the actual DOM, painting the initial UI to the screen. + +8. After the render, React runs the scheduled effects: + - The `useEffect` in Child component is executed. + - "FUNCTION WAS CALLED" is logged to the console. + +9. The application is now in its initial state, waiting for user interaction. + +10. User clicks the "Toggle" button: + - The onClick handler is triggered. + - `setToggle(!toggle)` is called, scheduling a state update. + +11. React processes the state update: + - It marks the CallBackTutorial component for re-rendering. + +12. Re-render of CallBackTutorial begins: + - The function component is executed again. + - `useState` and `useCallback` hooks are called again: + - `toggle` state is updated with its new value. + - `data` state remains unchanged. + - `returnComment` function is not recreated as `data` hasn't changed. + +13. JSX in CallBackTutorial is re-evaluated: + - If `toggle` is now `true`, the `

toggle

` element is included in the virtual DOM. + +14. Child component is encountered again: + - React checks if any props have changed. + - `returnComment` is the same reference as before (thanks to useCallback), so Child is not re-rendered. + +15. React completes the re-render: + - The new virtual DOM is compared with the previous one (diffing process). + - Only the changes (the toggle h1 element) are applied to the actual DOM. + +16. The application is now in its updated state, again waiting for user interaction. + +This cycle of user interaction → state update → re-render continues throughout the lifecycle of the application, with Child only re-rendering if the `data` state in CallBackTutorial changes, causing a new reference of `returnComment` to be created. + +## URL of React Documentation Reference + +- useState: https://react.dev/reference/react/useState +- useCallback: https://react.dev/reference/react/useCallback +- useEffect: https://react.dev/reference/react/useEffect +- Components and Props: https://react.dev/learn/your-first-component From d89818ccf36941f2fe7f6e7bbaff55f99da8c168 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sat, 17 Aug 2024 22:36:03 +0530 Subject: [PATCH 14/20] Update README.md --- src/UseCallback/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index f46cf28..4c717fb 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -94,7 +94,7 @@ Then, This cycle of user interaction → state update → re-render continues throughout the lifecycle of the application, with Child only re-rendering if the `data` state in CallBackTutorial changes, causing a new reference of `returnComment` to be created. -## URL of React Documentation Reference +## React Dev Reference - useState: https://react.dev/reference/react/useState - useCallback: https://react.dev/reference/react/useCallback From 4129db10491275433b9e658b7067a9838e6d9dbd Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 03:09:15 +0530 Subject: [PATCH 15/20] Update README.md --- src/UseCallback/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index 4c717fb..bd80c70 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -14,6 +14,13 @@ A Hook that lets you cache a function definition between re-renders. ### useEffect A Hook that lets you perform side effects in function components. - `useEffect(() => { console.log("FUNCTION WAS CALLED"); }, [returnComment]);`: Logs a message to the console whenever the returnComment function reference changes, demonstrating when the Child component re-renders. +- A side effect refers to any operation that affects the state outside of the function's scope or interacts with the outside world. This can include: + + Modifying a global variable or an object passed by reference. + Performing I/O operations, such as reading from or writing to a file or database. + Making network requests or API calls. + Logging information to the console. + ### Child Component A component that is nested within another component (the parent component). From 471c15968b1e2c82f367e4b7ad3c5a8fd097fd0d Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 03:10:07 +0530 Subject: [PATCH 16/20] Update README.md --- src/UseCallback/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index bd80c70..07b7a2b 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -16,10 +16,10 @@ A Hook that lets you perform side effects in function components. - `useEffect(() => { console.log("FUNCTION WAS CALLED"); }, [returnComment]);`: Logs a message to the console whenever the returnComment function reference changes, demonstrating when the Child component re-renders. - A side effect refers to any operation that affects the state outside of the function's scope or interacts with the outside world. This can include: - Modifying a global variable or an object passed by reference. - Performing I/O operations, such as reading from or writing to a file or database. - Making network requests or API calls. - Logging information to the console. + - Modifying a global variable or an object passed by reference. + - Performing I/O operations, such as reading from or writing to a file or database. + - Making network requests or API calls. + - Logging information to the console. ### Child Component From e04e7ee69c120ab7ebe5961f37268fc13cddcfa3 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 11:16:32 +0530 Subject: [PATCH 17/20] Update README.md Memoization is widely used in React for performance optimization --- src/UseCallback/README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index 07b7a2b..3975684 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -10,7 +10,12 @@ A Hook that lets you add React state to function components. ### useCallback A Hook that lets you cache a function definition between re-renders. - `const returnComment = useCallback((name) => { return data + name; }, [data]);`: Memoizes the returnComment function, preventing unnecessary re-renders of the Child component unless the 'data' dependency changes. - +- Memoization is widely used in React for performance optimization + - React provides built-in hooks like useMemo and useCallback that implement memoization. These hooks are used to optimize expensive calculations and prevent unnecessary re-renders of components. + - Memoization can be used in various contexts beyond simple function caching, and for purposes other than speed gains, such as in simple mutually recursive descent parsing. + - Memoization is specifically about caching function results, unlike other forms of caching that might deal with data storage or retrieval. + - Specific implementation of Memoization in logic programming languages is also known as tabling. + ### useEffect A Hook that lets you perform side effects in function components. - `useEffect(() => { console.log("FUNCTION WAS CALLED"); }, [returnComment]);`: Logs a message to the console whenever the returnComment function reference changes, demonstrating when the Child component re-renders. From d95e8f9fdd8ca8b450f5b7f2c7b748928737a156 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 11:18:44 +0530 Subject: [PATCH 18/20] Update README.md --- src/UseCallback/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index 3975684..1600aee 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -11,6 +11,7 @@ A Hook that lets you add React state to function components. A Hook that lets you cache a function definition between re-renders. - `const returnComment = useCallback((name) => { return data + name; }, [data]);`: Memoizes the returnComment function, preventing unnecessary re-renders of the Child component unless the 'data' dependency changes. - Memoization is widely used in React for performance optimization + - React provides built-in hooks like useMemo and useCallback that implement memoization. These hooks are used to optimize expensive calculations and prevent unnecessary re-renders of components. - Memoization can be used in various contexts beyond simple function caching, and for purposes other than speed gains, such as in simple mutually recursive descent parsing. - Memoization is specifically about caching function results, unlike other forms of caching that might deal with data storage or retrieval. From f6f9b0e591a2e3fed1fe89aa2a5698953548b285 Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 12:36:48 +0530 Subject: [PATCH 19/20] Update README.md --- src/UseCallback/README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index 1600aee..116d849 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -35,9 +35,6 @@ A component that is nested within another component (the parent component). ## Operations -First is the mounting of the CallBackTutorial component. - -Then, 1. CallBackTutorial component starts mounting: - React processes the import statements, bringing in necessary dependencies (axios, useState, useCallback, and the Child component). From 1f4fdafc2829cf3c4b30c916d430d9645dec5a0d Mon Sep 17 00:00:00 2001 From: Sukumar Satyen Date: Sun, 18 Aug 2024 14:08:44 +0530 Subject: [PATCH 20/20] Update README.md updated explanation of the Operations sequence, focusing on clarifying how memoization applies to useCallback. This explanation emphasizes that useCallback memoizes the function reference itself, not the function's output. The key points highlighted in this updated explanation are: useCallback stores and reuses the entire function definition, not just its results. The memoization is based on the dependency array ([data] in this case). The benefit of this memoization is maintaining a stable function identity across re-renders, which helps prevent unnecessary re-renders of child components. This differs from traditional memoization, which typically caches function results based on input. This explanation should provide a clearer understanding of how useCallback implements memoization in the context of React components and reconciliation. --- src/UseCallback/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/UseCallback/README.md b/src/UseCallback/README.md index 116d849..e06fe3f 100644 --- a/src/UseCallback/README.md +++ b/src/UseCallback/README.md @@ -48,7 +48,14 @@ A component that is nested within another component (the parent component). 3. `useCallback` is executed: - React creates a memoized version of the `returnComment` function. + - **Memoization Explanation**: + - useCallback memoizes the function definition itself, not the function's output. + - It stores the function reference, creating a new reference only if the dependencies change. + - This differs from traditional memoization, which caches function results based on input. + - In this case, the entire function `(name) => { return data + name; }` is stored and reused. - The function is memoized with `data` as a dependency, meaning it will only be recreated if `data` changes. + - The stored function reference will only change if `data` changes. + - This ensures stable function identity across re-renders when `data` remains the same. 4. The JSX in the return statement of CallBackTutorial is evaluated: - React processes the JSX, creating a virtual DOM representation. @@ -87,6 +94,10 @@ A component that is nested within another component (the parent component). - `useState` and `useCallback` hooks are called again: - `toggle` state is updated with its new value. - `data` state remains unchanged. + - **Memoization in Action**: + - `useCallback` checks its dependencies (`[data]`). + - Since `data` hasn't changed, it returns the same function reference as before. + - This demonstrates how useCallback caches the function definition, not its result. - `returnComment` function is not recreated as `data` hasn't changed. 13. JSX in CallBackTutorial is re-evaluated: @@ -94,6 +105,10 @@ A component that is nested within another component (the parent component). 14. Child component is encountered again: - React checks if any props have changed. + - **Benefit of Memoization**: + - `returnComment` is the same reference as before, thanks to useCallback. + - React determines that Child's props haven't changed. + - Child component is not re-rendered, preventing unnecessary computation. - `returnComment` is the same reference as before (thanks to useCallback), so Child is not re-rendered. 15. React completes the re-render: @@ -104,6 +119,8 @@ A component that is nested within another component (the parent component). This cycle of user interaction → state update → re-render continues throughout the lifecycle of the application, with Child only re-rendering if the `data` state in CallBackTutorial changes, causing a new reference of `returnComment` to be created. +This cycle continues throughout the application's lifecycle. The key point is that useCallback memoizes the function definition itself, providing a stable function reference. This stability prevents unnecessary re-renders of Child, as React can quickly determine that the prop hasn't changed. The actual caching of function results (what `returnComment` returns) doesn't occur here; instead, it's the function's identity that's preserved across renders, which is crucial for optimizing React's reconciliation process. + ## React Dev Reference - useState: https://react.dev/reference/react/useState