useState is used to define state variable to update the UI after rendering

              'use client'
              import React from 'react';
              import { useState, useEffect } from "react";


              export default function Home() {              


                
                        const [posts, setPosts] = useState([]); 
                  
                        const loadPost = async () => { 
                            
                    
                                  const res = await fetch(
                                      "https://jsonplaceholder.typicode.com/posts/"
                                  ); 
                                  const data = await res.json();
                                  // After fetching data stored it in posts state. 
                                  setPosts(data); 
                  
                            
                        }; 
                  
                        // Call the function 
                        loadPost(); 

                  

                

                
                return (
                  <div className="App"> 
                        { posts.map((item) => ( 
                                <div key={item.id}>
                                    <h4>{item.title}</h4> 
                                </div>
                            )) } 
                    </div> 
                );
                
              }

        

Note that there will be infinitive API call To fix this side effect of API call, we need to use useEffect

              'use client'
            import React from 'react';
            import { useState, useEffect } from "react";


          export default function Home() {              


            
            const [posts, setPosts] = useState([]); 
              
              



              useEffect(() => { 
                      const loadPost = async () => { 
                         
                
                          const res = await fetch(
                              "https://jsonplaceholder.typicode.com/posts/"
                          ); 
                          const data = await res.json();
                          // After fetching data stored it in posts state. 
                          setPosts(data); 
                
                         
                      }; 
                
                      // Call the function 
                      loadPost(); 
            }, []); 

              

            

            
            return (
              <div className="App"> 
                    { posts.map((item) => ( 
                            <div key={item.id}>
                                <h4>{item.title}</h4> 
                             </div>
                        )) } 
                </div> 
            );
            
          }