I'm currently diving into the world of Next.js and I'm eager to showcase data based on user input queries. However, I'm uncertain if leveraging useSWR is the most suitable approach to tackle this challenge because I haven't come across any examples illustrating what I'm attempting to achieve.
Here's a glimpse of my code:
export default function SearchBar() {
const [query, setQuery] = useState("");
const [address, setAddress] = useState("");
const fetcher = async (url) => await axios.get(url).then((res) => res.data);
const { data, error } = useSWR(address, fetcher);
const handleSubmit = (e) => {
setAddress(`https://jsonplaceholder.typicode.com/todos/${query}`);
e.preventDefault();
};
if (error) return <div>ERROR</div>;
return (
<>
<Form onSubmit={handleSubmit}>
<Input
type="text"
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
<SearchButton type="submit">Search</SearchButton>
</Form>
</>
);
}
Could anyone confirm if my implementation of useSWR is appropriate or would it be more effective to stick with a conventional fetch method paired with useEffect?