updated

AdarshRazor · AdarshRazor · commit 6a244456c0e9 · 2024-08-03T05:57:29.000+05:30
diff --git a/ReactJS/Interview/100_React_Question/10.Controlled_Uncontrolled_Components.md b/ReactJS/Interview/100_React_Question/10.Controlled_Uncontrolled_Components.md
@@ -0,0 +1,158 @@
+# 100 React Questions (Controlled & Uncontrolled Components)
+
+## Q1. What are Controlled Components in React? `V. IMP.`
+
+A controlled component is a component whose form elements (like input fields or checkboxes) are `controlled by the state` of the application.
+
+```javascript
+const Controlled = () => {
+    // State to store the input value
+    const [inputValue, setInputValue] = useState("");
+
+    // Event handler for input changes
+    const handleInputChange = (e) => {
+        // Update the state with the new input value
+        setInputValue(e.target.value);
+    };
+
+    return (
+        <div>
+            {/* Input controlled by the state */}
+            <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Type..." />
+
+            {/* Display the current state value */}
+            <p>You typed: {inputValue}</p>
+        </div>
+    );
+};
+
+export default Controlled
+```
+
+## Q2. What are the Differences between Controlled & Uncontrolled Components? `V. IMP.`
+
+| Feature | Controlled Components | Uncontrolled Components |
+|---|---|---|
+| Value management | Controlled by `React state` | Not controlled by React state |
+| State updates | Event handlers `update React state` | No explicit state update; values accessed directly from DOM |
+| Refs | Don't depend on useRef() | Commonly uses `useRef()` to access element values |
+| Re-rendering | `Re-renders` on state changes | Less re-rendering due to decoupled values |
+| Recommendation | A `Recommended` and standard practice for form handling 🏆 | Useful in certain scenarios but less common best practice |
+
+
+### Controlled Component
+```javascript
+const Controlled = () => {
+    // State to store the input value
+    const [inputValue, setInputValue] = useState("");
+
+    // Event handler for input changes
+    const handleInputChange = (e) => {
+        // Update the state with the new input value
+        setInputValue(e.target.value);
+    };
+
+    return (
+        <div>
+            {/* Input controlled by the state */}
+            <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Type..." />
+
+            {/* Display the current state value */}
+            <p>You typed: {inputValue}</p>
+        </div>
+    );
+};
+
+export default Controlled
+```
+
+### Uncontrolled Component
+```javascript
+const Uncontrolled = () => {
+  // Create a ref to access the input value
+  const inputRef = useRef(null);
+
+  const handleClick = () => {
+    // Access the input value directly using ref
+    const value = inputRef.current.value;
+    alert(`You typed: ${value}`);
+  };
+
+  return (
+    <div>
+      {/* Uncontrolled input with ref */}
+      <input type="text" ref={inputRef} placeholder="Type something..." />
+
+      <button onClick={handleClick}>Click</button>
+    </div>
+  );
+};
+
+export default Uncontrolled
+```
+
+## Q3. What are characteristics of controlled components?
+
+* **State Control**: The value of the form element is stored in the component's state.
+
+* **Event Handling**: Changes to the form element trigger an event (e.g., onChange for input fields).
+
+* **State Update**: The event handler updates the component's state with the new value of the form element.
+
+* **Re-rendering**: The component re-renders with the updated state, and the form element reflects the new value.
+
+```javascript
+const Controlled = () => {
+    // State to store the input value
+    const [inputValue, setInputValue] = useState("");
+
+    // Event handler for input changes
+    const handleInputChange = (e) => {
+        // State update
+        setInputValue(e.target.value);
+    };
+
+    return (
+        <div>
+            {/* Event Handling */}
+            <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Type..." />
+
+            {/* Display the current state value */}
+            <p>You typed: {inputValue}</p>
+        </div>
+    );
+};
+
+export default Controlled
+```
+
+## Q4. What are the advantages of using controlled components in React forms?
+
+* Single Source of Truth: Form element values are managed by React state, ensuring data consistency.
+
+* Predictable Updates: Facilitates form validation, dynamic rendering, and seamless integration with React's lifecycle methods.
+
+* Better Control and Maintainability: Offers superior control and manageability compared to uncontrolled components, making them the preferred approach for React form handling.
+
+## Q5. How to handle forms in React?
+
+The preferred and recommended approach for handling forms in React is `by using controlled components`.
+
+## Q6. How can you handle multiple input fields in a controlled form?
+
+Maintain `seperate state variables` for each input and update them individually using the `onChange event`.
+
+## Q7. How do you handle form validation in a controlled component?
+
+By using conditional rendering based on the state and validate input values before updating the state.
+
+## Q8. In what scenarios might using uncontrolled components be advantageous?
+
+Uncontrolled components can be beneficial when integrating with non-React libraries, or when dealing with forms where controlled components are not possible.
+
+<!---
+Adarsh 
+3rd August 2024
+05:22 AM
+(19:50)
+--->
diff --git a/ReactJS/Interview/100_React_Question/11.Code_Splitting.md b/ReactJS/Interview/100_React_Question/11.Code_Splitting.md
@@ -0,0 +1,137 @@
+# 100 React Questions (Code Splitting)
+
+## Q1. What is Code Splitting in React? `V. IMP.`
+
+Code splitting is a technique to split the JavaScript bundle into `smaller chunks`, which are `loaded on-demand`.
+
+## Q2. How to Implement Code Splitting in React? `V. IMP.`
+
+* Use React.lazy() to lazily import components.
+
+* Wrap components with Suspense to handle loading.
+
+* Configure your build tool (e.g., Webpack) for dynamic imports.
+
+    ```javascript
+    const CodeSplit = () => {
+    return <div>My component!</div>;
+    };
+
+    export default CodeSplit;
+    ```
+
+    ### App.js
+    ```javascript
+    import React, { lazy, Suspense } from "react";
+
+    const CodeSplit = lazy(() => import("./Others/CodeSplit"));
+
+    function App() {
+    return (
+        <div>
+        <Suspense fallback={<div>Loading...</div>}>
+            <CodeSplit />
+        </Suspense>
+        </div>
+    );
+    }
+    ```
+
+    ## webpack installation command
+    ```javascript
+    // npm install webpack webpack-cli --save-dev
+    const path = require('path');
+
+    module.exports = {
+    // other webpack configuration...
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    };
+    ```
+
+## Q3. What is the role of Lazy and Suspense methods in React? `V. IMP.`
+
+* React.lazy is a function that allows you to `load a component lazily`.
+
+* It enables code splitting by allowing you to import a component asynchronously/dynamically, meaning the component is loaded only when needed.
+
+* The Suspense component is used to display a fallback UI while the lazily loaded component is being fetched.
+
+### App.js
+```javascript
+import React, { lazy, Suspense } from "react";
+
+const CodeSplit = lazy(() => import("./Others/CodeSplit"));
+
+function App() {
+return (
+    <div>
+    <Suspense fallback={<div>Loading...</div>}>
+        <CodeSplit />
+    </Suspense>
+    </div>
+);
+}
+```
+
+## Q4. What are the Pros and Cons of Code Splitting?
+
+### Pros:
+| Pros of Code Splitting | Description |
+|---|---|
+| Faster Initial Load Time | Code splitting reduces the initial load time of your application by only loading the necessary code for the current view or feature. Good for performance. |
+| Optimized Bandwidth Usage | By loading only the code needed for a specific page, it reduces the amount of data transferred over the network. Good for slow networks. |
+| Improved Caching | Smaller, more focused code chunks are more likely to be cached by the browser. |
+| Parallel Loading | Multiple smaller chunks can be loaded simultaneously, leading to faster overall loading times. |
+| Easier Maintenance | Code splitting can make your codebase more modular, independent, and easier to maintain. |
+
+### Cons:
+| Cons of Code Splitting | Description |
+|---|---|
+| Complexity | Implementing code splitting introduces additional complexity to your application. This complexity can make the development process slow. |
+| Tooling Dependencies | Proper code splitting often requires specific build tools and configurations, such as Webpack and Babel. Managing these tools is challenging. |
+| Potential for Runtime Errors | Dynamically loading code at runtime can introduce the possibility of runtime errors. Careful testing is necessary to catch such issues. |
+| Increased Number of Requests | Code splitting may increase the number of HTTP requests needed to fetch all the necessary chunks. This can impact performance. |
+| Learning Curve | Developers who are new to code splitting may need time to understand the concepts and best practices. This can be a challenging. |
+
+## Q5. What is the role of the import() function in code splitting?
+
+The import() function returns a promise that allow `dyanmic loading of modules`.
+
+### App.js
+```javascript
+import React, { lazy, Suspense } from "react";
+
+const CodeSplit = lazy(() => import("./Others/CodeSplit"));
+
+function App() {
+return (
+    <div>
+    <Suspense fallback={<div>Loading...</div>}>
+        <CodeSplit />
+    </Suspense>
+    </div>
+);
+}
+```
+
+## Q6. What is the purpose of the fallback prop in Suspense?
+
+The fallback prop provides a `loading indicator` or UI while the dynamically imported component is being loaded.
+
+## Q7. Can you dynamically load CSS files using code splitting in React?
+
+`Yes`, using dynamic import() for CSS files allows you to load styles on-demand along with the corresponding components.
+
+## Q8. How do you inspect and analyze the generated chunks in a React application?
+
+Use tools like `Webpack Bundle Analyzer` to analyze the size and composition of chunks.
+
+<!---
+Adarsh 
+3rd August 2024
+05:43 AM
+(14:40)
+--->
diff --git a/ReactJS/Interview/100_React_Question/8.Hooks_useContext_useReducer.md b/ReactJS/Interview/100_React_Question/8.Hooks_useContext_useReducer.md
@@ -0,0 +1,81 @@
+# 100 React Questions (Hooks - useContext/useReducer)
+
+## Q1. What is the role of useContext() hook? `V. IMP.`
+
+useContext in React provides a way to pass data from parent to child component without using props.
+
+### MyContext.js
+```javascript
+import { createContext } from "react";
+
+const MyContext = createContext();
+export default MyContext;
+```
+
+### Parent.js
+```javascript
+const Parent = () => {
+    const contextValue = "Hello from Context!";
+    
+    return (
+        <MyContext.Provider value={contextValue}>
+            {/* Your component tree */}
+            <Child />
+        </MyContext.Provider>
+    );
+};
+export default Parent;
+```
+
+### Child.js
+```javascript
+const Child = () => {
+    const contextValue = useContext(MyContext);
+
+    return <p>{contextValue}</p>;
+
+    // return (
+    // <MyContext.Consumer>
+    //     {(contextValue) => <div>{contextValue}</div>}
+    // </MyContext.Consumer>
+    // );
+};
+export default Child;
+```
+
+## Q2. What is createContext() method? What are Provider & Consumer properties?
+
+* The createContext() function returns an object with Provider and Consumer properties.
+
+* The Provider property is responsible for providing the context value to all its child components.
+
+* The useContext() method or Consumer property can be used to consume the context value in child components.
+
+## Q3. When to use useContext() hook instead of props in real applications?
+
+Use useContext instead of props when you want to `avoid prop drilling` and access context values directly within deeply nested components.
+
+| Feature | Description |
+|---|---|
+| Theme Switching (Dark/Light) | Centralize and pass theme selection from parent to all child components. |
+| Localization (Language Selection) | Centralize and pass language selection from parent to all child components. |
+| Centralize Configuration Settings | Centralize common settings like API endpoints. Changes in parent affect all children. |
+| User Preferences | Centralize user preferences beyond theme and localization. |
+| Notification System | Access notification state from context for components triggering or displaying notifications. |
+
+## Q4. What are the similarities between useState() and useReducer() hook?
+
+## Q5. What is useReducer() hook? When to use useState() and when useReducer()? `V. IMP.`
+
+## Q6. What are the differences between useState() and useReducer() Hook?
+
+## Q7. What are dispatch & reducer function in useReducer Hook?
+
+## Q8. What is the purpose of passing initial state as an object in UseReducer?
+
+<!---
+Adarsh 
+2nd August 2024
+09:13 PM
+(19:25)
+--->
diff --git a/ReactJS/Interview/100_React_Question/9.Components_LifeCycle.md b/ReactJS/Interview/100_React_Question/9.Components_LifeCycle.md
