use-effect

问题 I want to run an interval with a delay for the first time it fires. How can I do this with useEffect? Because of the syntax I've found it difficult to achieve what I want to do The interval function useEffect(()=>{ const timer = setInterval(() => { //do something here return ()=> clearInterval(timer) }, 1000); },[/*dependency*/]) The delay function useEffect(() => { setTimeout(() => { //I want to run the interval here, but it will only run once //because of no dependencies. If i populate the

问题 I'm implementing authentication into my app, the issue I am having is on refresh the state is not persistent so I get redirected back to the login screen. How can I use React Hooks to check if there is an authToken in local storage to keep me logged in on refresh. This is My Protected Route That checks for auth tokens <Route {...rest} render={ props=> authTokens ? ( <Component {...props}/> ) : ( <Redirect to ={ { pathname: '/login', state: { from: props.location } } } /> This is my Login page

问题 I've been using hooks for a while and I never fully understand why React is forcing me to includes some dependencies that I don't want on my useEffect. The way I understand the 'dependencies' of a useEffect hook Add the values you want to 'listen' whenever they change and trigger your effect. This works perfectly with a simple effect like: import React, {useEffect, useState} from "react"; interface Props { id: string } const SimpleComponent = (props: Props) => { const {id} = props; const

问题 On this answer by Dan Abramov here on SO, I've found out the following: Does React keep the order for state updates? Currently (React 16 and earlier), only updates inside React event handlers are batched by default. There is an unstable API to force batching outside of event handlers for rare cases when you need it. He also mentions that in this Github issue: https://github.com/facebook/react/issues/10231#issuecomment-316644950 In current release, they will be batched together if you are

问题 On this answer by Dan Abramov here on SO, I've found out the following: Does React keep the order for state updates? Currently (React 16 and earlier), only updates inside React event handlers are batched by default. There is an unstable API to force batching outside of event handlers for rare cases when you need it. He also mentions that in this Github issue: https://github.com/facebook/react/issues/10231#issuecomment-316644950 In current release, they will be batched together if you are

问题 I am trying to fetch data from json file in firebase. I get this error before the app loads sometimes. The App still works. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Kindly help me to fix this. Here is my code : const [dataSource, setData] = useState([]); useEffect(() => { fetch("https://jsonurlcomeshere

问题 I tried to set a state using useState inside useEffect with no problem, code as follows: import React, {useState, useEffect} from 'react'; const Banner = () => { const [title, setTitle] = useState([]); useEffect(() => { async function fetchData() { const api = 'some api url'; let response = await fetch(api); response = await response.json(); setTitle(response.title); } fetchData(); }) } export default Banner; Now I'd like to do the same thing but with useReducer, I tried to modify the above

问题 I have a functional component in which I want to save the data in my inputs form sending them with saveForm method to my java API. How can I read the response of this promise props.saveForm (in order to look for potentials server errors) in a functional component ? I've read that in these cases it must be used useEffect hooks..but If I move my handleSubmitForm() inside useEffect than I can't call it when the onSubmit event is thrown. Please enlight me. Thank you for your wisdom. Code I found

问题 I have a functional component in which I want to save the data in my inputs form sending them with saveForm method to my java API. How can I read the response of this promise props.saveForm (in order to look for potentials server errors) in a functional component ? I've read that in these cases it must be used useEffect hooks..but If I move my handleSubmitForm() inside useEffect than I can't call it when the onSubmit event is thrown. Please enlight me. Thank you for your wisdom. Code I found

问题 Is there a way to avoid update a callback in useEffect?. For example I am subscribed an event with geofire, this listens for changes and receive locations. I need to update my state without subscribing every time on every update. Current behavior Subscribed to geofire and receive location (A) Update my state with the new location (A) Subscribed to geofire again and receive location (A) this is an infinite loop. And I can't receive the other locations Expected behavior subscribed to geofire