• What's a suspense boundary and what it does when throws a promise?

  • import { Suspense } from 'react';
    import Albums from './Albums.js';
    
    export default function ArtistPage({ artist }) {
      return (
        <>
          <h1>{artist.name}</h1>
          <Suspense fallback={<Loading />}>
            <Albums artistId={artist.id} />
          </Suspense>
        </>
      );
    }
    
    function Loading() {
      return <h2> Loading...</h2>;
    }
    import { use } from "react";
    import { fetchData } from "./data.js";
    
    export default function Albums({ artistId }) {
      const albums = use(fetchData(`/${artistId}/albums`));
    
      return (
        <ul>
          {albums.map((album) => (
            <li key={album.id}>
              {album.title} ({album.year})
            </li>
          ))}
        </ul>
      );
    }
    
    
    

• Which Error Boundary catchs the error

  • 
    
    import * as React from 'react';
    
    function App() {
      return (
        <ErrorBoundary name="boundary-1">
          <A />
        </ErrorBoundary>
      )
    }
    function renderWithError() {
      console.log('throw')
      throw new Error('error');
    }
    
    function A() {
      return <ErrorBoundary name="boundary-2">
        {renderWithError()}
      </ErrorBoundary>;
    }
    
    
    
    

• Create a useHover() hook

  • function App() {
      const [ref, isHovered] = useHover()
      return <div ref={ref}>{isHovered ? 'hovered' : 'not hovered'}</div>}
    
    

• Implement a increment and decrement where it needs to start on start button and end on stop
  • 
• Create a Simple Form with validation
• Implement a useDebounce hook
• Implement a custom hook like this for data fetching no need to replicate all tanstack or rtk or swr

  •   const { data, error } = useData('https://jsonplaceholder.typicode.com/todos/1')
    
    

• Create a context for a Todo app with reducer's only text field for tasks
  • 
• useEffect vs useInsertionEffect vs useLayoutEffect
• what's the diff between react and react-dom package and what's the use createRoot or render