Issues In Re-Rendering , Certainly! If you want to prevent unnecessary re-renders of components like the Navbar while allowing the Main component to update based on changes in state, you can manage the state locally within the Main component instead of lifting it up to the App component. This strategy is particularly useful when the state in question doesn't affect other components outside of Main. Here’s a step-by-step code implementation to demonstrate how to keep the state local to the Main component for managing content changes: Step 1: Main Component with Local State Let’s refactor the Main component to manage its own state. This state will control what content is displayed based on user interactions handled internally, without involving the parent component (App).

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Main = () => {
    const [contentType, setContentType] = useState('movies'); // Default to movies
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const API_KEY = process.env.REACT_APP_OMDB_API_KEY;
            const url = `https://www.omdbapi.com/?apikey=${API_KEY}&s=batman&type=${contentType}`;
            try {
                const response = await axios.get(url);
                setData(response.data.Search);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, [contentType]);

    return (
        <div>
            <button onClick={() => setContentType('movies')}>Movies</button>
            <button onClick={() => setContentType('series')}>TV Shows</button>
            {data.map(item => (
                <div key={item.imdbID}>
                    <h3>{item.Title}</h3>
                    <img src={item.Poster} alt={item.Title} />
                </div>
            ))}
        </div>
    );
};

export default Main;



import React from 'react';
import Navbar from './components/Navbar';
import Main from './components/Main';

const App = () => {
    return (
        <>
            <Navbar />
            <Main />
        </>
    );
};

export default App;