Child component keeps refreshing on useState set
Answered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
I have a parent component with an <input> onChange setSearch useState. I then have another component with params search={search}. In the child component I have useEffect to call the server with the search query. It just keeps hammering the server with constant rapid refreshes.
Answered by Pearls
It might be because you have dont have the dependencies argument in your useEffect
18 Replies
Saltwater CrocodileOP
export default function RepairCentreSearch() {
const [search, setSearch] = useState('');
return (
<>
<fieldset className="offset-sm-3 col-sm-6 mb-3">
<label className="form-label mb-1" htmlFor="repairCentreSearch">Repair Centre Name</label>
<input
id="repairCentreSearch"
className="form-control"
onChange={(e) => {
setSearch(e.target.value)
}}
placeholder="Search for your repair centre"
/>
</fieldset>
<div className="col-12">
<RepairCentreResults search={search}></RepairCentreResults>export function RepairCentreResults({search}: { search: string }) {
const [isLoading, setIsLoading] = useState(true)
const [repairCentres, setRepairCentres] = useState<RepairCentreDto[]>([])
console.log(search)
useEffect(() => {
fetch('http://localhost:5193/GetRepairCentres?search=' + search)
.then(res => res.json())
.then((repairCentres : RepairCentreDto[]) => {
setRepairCentres(repairCentres)
setIsLoading(false)
})
})
if (isLoading) return <p>Loading...</p>
return (
<div className="table-responsive">Saltwater CrocodileOP
It's actually happening on setRepairCentres
Saltwater CrocodileOP
I'm very noobish, but I've posted four different questions over the last two months now and not one response.
Posting on Stack but I'm starting to feel pretty stupid.
@Saltwater Crocodile I'm very noobish, but I've posted four different questions over the last two months now and not one response.
Maybe its because of the way you are writing your questions.
@Saltwater Crocodile I have a parent component with an <input> onChange setSearch useState. I then have another component with params search={search}. In the child component I have useEffect to call the server with the search query. It just keeps hammering the server with constant rapid refreshes.
Add a small screen recording of what is happening + your code and a small explanation on what you expect to happen
I'm on mobile so i cant get a good sense of the code but i recommend adding a button instead to fire off the setState or do it onBlur(when your input loses focus)
It might be because you have dont have the dependencies argument in your useEffect
Answer
https://react.dev/reference/react/useEffect
The correct syntax for a useEffect is:
The correct syntax for a useEffect is:
useEffect(setup, dependencies?)i would recommend to change your useEffect from this:
To this:
useEffect(() => {
fetch('http://localhost:5193/GetRepairCentres?search=' + search)
.then(res => res.json())
.then((repairCentres : RepairCentreDto[]) => {
setRepairCentres(repairCentres)
setIsLoading(false)
})
})To this:
useEffect(() => {
fetch('http://localhost:5193/GetRepairCentres?search=' + search)
.then(res => res.json())
.then((repairCentres : RepairCentreDto[]) => {
setRepairCentres(repairCentres)
setIsLoading(false)
})
}, []) // <-- added the dependencies argument with 0 depencies so it doesnt refreshIf you want the api request to be executed every time 'search' changes then you might have to add the 'search' variable to the depencies list
@Saltwater Crocodile ^
@Saltwater Crocodile If you dont need any more help, please mark a solution.
Saltwater CrocodileOP
You are correct. It was the dependencies argument. Nice to know there's life on this planet.
Alright, mark a solution if you dont need any more help.
Saltwater CrocodileOP
Is there a way to mark a specific reply as the answer?
Right click a message (or click the 3 horizontal dots) -> apps -> Mark solution