Sure, here are the requested code snippets and practice questions:

### Code Snippets:
directly paste in dev-tool console:

1. **Promises with setTimeout:**
   ```javascript
   const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

   console.log('Start');
   delay(2000).then(() => console.log('After 2 seconds'));
   console.log('End');
   ```

2. **Hoisting Example:**
   ```javascript
   console.log(x); // undefined
   var x = 5;
   console.log(x); // 5
   ```

3. **React Hooks (Counter):**
   ```javascript
   import React, { useState } from 'react';

   const Counter = () => {
     const [count, setCount] = useState(0);

     const increment = () => setCount(count + 1);
     const decrement = () => setCount(count - 1);

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     );
   };

   export default Counter;
   ```

### Practice Questions:

#### Promises with setTimeout:
1. **Question:** Explain how the above code snippet works.
   **Answer:**
   - The `delay` function returns a Promise that resolves after a specified time (in milliseconds).
   - The `console.log('Start')` is executed immediately.
   - Then, the `delay(2000)` Promise is invoked, which schedules the next line (`console.log('End')`) after a 2-second delay.
   - Finally, `console.log('End')` is executed, and after 2 seconds, the `console.log('After 2 seconds')` is executed.

2. **Question:** What would happen if we change the delay time in the `delay` function to 0 milliseconds?
   **Answer:** The behavior would remain the same because Promises with `setTimeout` are asynchronous, so even with 0 milliseconds, the next line would still be scheduled to execute after the current execution context finishes.

3. **Question:** How would you modify the code to execute a function after both `console.log` statements?
   **Answer:** You can use Promise chaining or `async/await` syntax to achieve this. For example:
   ```javascript
   delay(2000)
     .then(() => {
       console.log('After 2 seconds');
       return delay(2000);
     })
     .then(() => console.log('After another 2 seconds'));
   ```

4. **Question:** Is there any difference between using `setTimeout` directly and using it within a Promise?
   **Answer:** Yes, using `setTimeout` directly is synchronous, meaning the code after it will execute immediately, whereas using it within a Promise allows for better control over asynchronous behavior and chaining of actions.

5. **Question:** How would you handle errors in the Promise returned by the `delay` function?
   **Answer:** You can add a `.catch` method to the Promise chain to handle any errors that occur during execution.

#### Hoisting:
1. **Question:** Explain the output of the hoisting example provided.
   **Answer:**
   - Before variable `x` is declared and initialized, its value is `undefined` due to hoisting.
   - Therefore, the first `console.log(x)` prints `undefined`.
   - After `x` is assigned the value `5`, the second `console.log(x)` prints `5`.

2. **Question:** Does hoisting apply to both `let` and `const` declarations?
   **Answer:** No, `let` and `const` declarations are hoisted, but they are not initialized, so trying to access them before declaration results in a ReferenceError.

3. **Question:** What is the difference between function hoisting and variable hoisting?
   **Answer:** Function declarations are hoisted along with their definitions, meaning you can call a function before it's declared. Variable declarations are hoisted, but only the variable name is hoisted, not its value or assignment.

4. **Question:** How does hoisting impact the scope of variables and functions?
   **Answer:** Hoisting can lead to unexpected behavior if not understood properly, especially when variables and functions are declared inside different scopes. It's important to understand that hoisting applies differently to variables and functions.

5. **Question:** Is it recommended to rely on hoisting in JavaScript code?
   **Answer:** It's generally not recommended to rely on hoisting for code readability and maintainability. It's better to declare variables and functions at the beginning of their scope to avoid confusion.

#### React Hooks (Counter):
1. **Question:** Explain how the `useState` hook works in the provided `Counter` component.
   **Answer:**
   - `useState` is a React hook used to add state variables to functional components.
   - In the `Counter` component, `const [count, setCount] = useState(0)` declares a state variable `count` initialized to 0 and a function `setCount` to update the `count` state.
   - The `useState` hook returns an array with the current state value (`count`) and a function (`setCount`) to update the state.

2. **Question:** How would you modify the `Counter` component to start the count from 10 instead of 0?
   **Answer:** Change `useState(0)` to `useState(10)` to initialize the `count` state variable with a value of 10.

3. **Question:** What is the purpose of the `increment` and `decrement` functions in the `Counter` component?
   **Answer:**
   - The `increment` function increments the `count` state variable by 1 when called.
   - The `decrement` function decrements the `count` state variable by 1 when called.

4. **Question:** How would you add a button to reset the counter to 0 in the `Counter` component?
   **Answer:** Add a button element with an

 `onClick` handler that calls a `resetCount` function, which sets the `count` state variable to 0.

5. **Question:** Can you explain the purpose of the `useState` hook in React functional components?
   **Answer:** The `useState` hook allows functional components to have state variables, enabling them to store and update component state without using class-based components. It simplifies state management in functional components by providing a way to declare and initialize state variables within the component's function body.