// src/App.jsx
import { useEffect, useState } from "react";

function SearchLogger({ query }) {
  useEffect(() => {
    console.log(`Searching for: ${query}`);
  }, [query]);

  return <p>Current query: {query}</p>;
}

function App() {
  const [query, setQuery] = useState("react");

  return (
    <div>
      <SearchLogger query={query} />
      <button onClick={() => setQuery("hooks")}>Search "hooks"</button>
      <button onClick={() => setQuery("vite")}>Search "vite"</button>
    </div>
  );
}

export default App;

/*
  Notes:
  - SearchLogger's effect re-runs every time its query prop changes,
    because [query] is in the dependency array — clicking either
    button in App changes query, which re-triggers the effect.
  - The effect does NOT run on every render of App overall, only when
    the specific query value SearchLogger receives actually changes.
*/