score:1
Accepted answer
It's better to make api call only once the component get mounted:
useEffect(() => {
getTournaments(props.sport)
}, [props.sport]}
score:2
You're almost there, you're doing the correct use of the useState hook, but you need to wrap your function in an useEffect hook, because you're. performing a side effect.
useEffect(() => {
const getTournaments = async (sport) => {
axios
.get("https://futbol-back.herokuapp.com/tournaments/sport/" + sport)
.then(function(response) {
// handle success
// tournaments = response.data;
if (props.sport!= selected_sport){ // This is where I correct the infinite loop
console.log(selected_sport)
selected_sport = props.sport
setTournaments(response.data)
}
})
.catch(function(error) {
// handle error
console.log(error);
})
.then(function() {
// always executed
});
};
getTournaments(props.sport);
}, []);
This will assure that your effect will run when the component mounts and it will only run once. All your side effects should go in the use effect
Source: stackoverflow.com
Related Query
- Is this the correct way to update the status in react with hook?
- What is the correct way to React Hook Fetch Api and store to Redux and retrieve it with Selector immediately?
- What is the correct way to use react hook useState update function?
- Is this the correct way to make an axios GET request with react redux?
- What is the 'proper' way to update a react component after an interval with hooks?
- The correct way to update props with Mapbox
- Is this the correct way to protect a route in React using hooks?
- What's the correct way to initailise empty states in react with typescript
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- What's the correct way to render React components with different styles such as Navbar using React Router 6v?
- React - What is the correct way to make an API call with user input?
- Is this the correct way to update state?
- What is the correct way to include React in both an application and a private library? (React Invalid Hook Call warning from duplicate React)
- What is the correct way to update a counter in React
- Is this the correct way to show data in React from a fetch request, if not how do I change JSX being rendered to a component?
- What is the correct way to add to an array with splice in react
- Is there a better way to organize this React page with an async call to the API?
- Unable to update a list with react when its value is being changed using the hook useState function from React TypeError: map is not a function
- what is the correct syntax to update react hook state of Objects
- Is there a way to avoid infinite loop of dependencies and to pass the correct dependencies to useEffect hook in this case?
- Is this the correct way to change a Firestore document with a button next to it?
- Correct way to update state with react select multiple
- What is the correct way to handle an accesstoken with react to secure routes?
- What is the correct way to load prebuilt SQlite databases with or without PouchDB in a React App
- What is the correct way to loop through this array of objects inside of render, react
- Is this the correct way to delete an item using redux?
- What is the best way to deal with a fetch error in react redux?
- Hiding the status bar with React Native
- What is the correct way of adding a dependency to react in your package.json for a react component
- React efficiently update object in array with useState hook
More Query from same tag
- React how to test out react compoennt with setTimeout
- Restoring a React Context to its Default State
- How can I make a React "If" component that acts like a real "if" in Typescript?
- How to access React Components for Cypress
- How do I implement global theme to React Material UI?
- How to update a state of a specific index in array
- select cell in different column in react app
- Improving Caclculator inside react progrem
- React Query with TypeScript - how to force the rule that the query key always needs to be an array
- open window using react-router v4's this.props.history.push?
- Imperatively trigger an asynchronous request with React hooks
- How do you set a event listener/handler if someone types in the address bar?
- How to make react-typescript className to array
- Refresh a tab and not the ReactJs Ajax page
- How to use RouterLink with Microsoft FluentUI React Link component
- props state values in reactjs
- How to add a modifier to a nested document with mongodb
- Authentication Error when using mode: no-cors using fetch in React
- Deck.GL with CARTO and React
- How to useState for each object in an array
- Programmatically navigate using react router without duplicating paths
- Wait for function to setState before triggering next function
- React Rendering twice in Private Routes
- Filter nested JSON objects with an array of objects
- Lodash Debounce and Apollo Client useLazyQuery debounces once
- How to change the header of the details expand/collapse columns for the detail rows in kendo react?
- Is it possible to mock local functions using Jest
- how to write inline js event handler code in the react component using "this"
- How to get cropped image after crop as a form data in react
- How to edit input value in React Js?