We Keep Coding

how to detect if user is typing in react native?

I have an application in react native where i'm developing a search feature like Instagram.
It is like if user stop typing show him his query result.
my current approach is messing up redux. And sometimes it returns same element multiple times or sometime random elements which are irrelevant of that query.
right now. I'm calling search api immediately as use start typing in searchbar.
here is code below of my component.
import { getSearchDataApi } from "../../api/search/search";
import { clearSearchData, setSearchData } from "../../redux/action/search";
const SearchScreen =(props)=>{
const [autoFocus,setAutoFocus] = useState(true)
const [keyWord,setKeyWord] = useState(null)
const [isLoading,setIsLoading] = useState(false)
const [isError,setIsError] = useState(false)
const [pageNumber,setPageNumber] = useState(1)
const [loadMore,setLoadMore] = useState(true)
const loadMoreDataFunc =()=>{
if (pageNumber <= props.totalSearchPage) {
setPageNumber(pageNumber+1)
}
else {
setLoadMore(false)
}
}
const searchData = async(keyWord)=>{
console.log(keyWord,pageNumber)
try {
setIsLoading(true)
var searchResponse = await getSearchDataApi(keyWord,pageNumber)
props.setSearchData(searchResponse.data)
setIsLoading(false)
}
catch (e) {
setIsError(true)
console.log("Error --- ", e.response.data.message)
showMessage({
message: e.response.data.message,
type: "danger",
});
}
}
return (
<View>
....
</View>
)
}
const mapStateToProps = (state)=>({
searchData: state.searchReducer.searchData,
totalSearchPage: state.searchReducer.totalSearchPage,
})
export default connect(mapStateToProps,{setSearchData,clearSearchData})(SearchScreen);
I will really every thankful to someone how can help me in fixing. Appreciation in advance!
GOAL :
The goal that i want to achieve is when user stop typing then i call searchAPI with the keyword he/she entered in searchBar that's all.
I have also tried setTimeOut but that made things more worse.

The best solution to your problem is to debounce the state variable that is responsible for the user input. This way, you can use the effect hook to watch for changes on the debounced variable, and call the search API if/when conditions for the search API variables are met.

Well, I have put some effort to solve it with setTimeout once again and i have done it by following code of snippet.
useEffect(()=>{
setPageNumber(1)
props.clearSearchData()
const delayDebounceFn = setTimeout(() => {
console.log(keyWord)
if (keyWord) {
searchData(keyWord)
}
}, 500)
return () => clearTimeout(delayDebounceFn)
},[keyWord])

You can use a setInterval to create a countDown starting from 2 to 0, or 3 to 0, put it a state.
whenever user types, onChange is called, the from the callback you reset the countDown.
using useEffect with the countDown as dependency, you can open the search result whenever the countdown reaches 0. (which means the user hasn't typed anything since 2s ago)
this might help for creating the countdown https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks

How do you use two setIntervals with different timers in a React component?

So right now I have a verifyScreen which users are sent to when they don't have a verified email. I have a setInterval function that runs every 5 seconds to see if the user has confirmed their email.
I also need to have a second setInterval for the resend email button in case a user has not received it. It counts down by 1 until it hits 0 and the user can resend an email.
If I have one or the other in my useEffect everything works fine. They also won't run together if the other is running so I need some help understanding how setInterval works behind the scenes and how I can fix my issue. Thank you.
const [emailTimer, setEmailTimer] = useState(0);
const [, setUser] = useAtom(userAtom);
useEffect(() => {
const userTimer = setInterval(async () => {
const refreshedUser = auth().currentUser;
console.log('checked user');
if (refreshedUser?.emailVerified) {
clearInterval(userTimer);
setUser(refreshedUser);
} else {
await auth().currentUser?.reload();
}
}, 5000);
const resendEmailTimer = setInterval(() => {
if (emailTimer <= 0) {
clearInterval(resendEmailTimer);
} else {
console.log('second subtracted');
setEmailTimer(emailTimer - 1);
}
}, 1000);
return () => {
clearInterval(userTimer);
clearInterval(resendEmailTimer);
};
}, [emailTimer]);
If you know the solution and can also explain to me the why behind all this, I would really appreciate that.
Edit, my component which sets the email timer:
<View style={{ paddingBottom: 10 }}>
<PrimaryButton
disabled={emailTimer > 0}
onPress={async () => {
setEmailTimer(60);
await handleSendEmailConfirmation();
}}>
<CustomText
text={emailTimer > 0 ? `${emailTimer}` : 'Resend email'}
color={theme.colors.white}
/>
</PrimaryButton>
</View>
<OutlinedButton
onPress={async () => {
await handleLogOut();
}}>
<CustomText text="Cancel" />
</OutlinedButton>
</View>
Edit:
What happens with the code right now:
The component renders, and the user interval runs every ~5 seconds.
I click on the resend email button, which triggers the email timer every 1 second.
While the email counter is going, the user counter pauses until it hits 0.
Then the user counter resumes.
Console logs for more description:
Edit 2: Ok I managed to get both intervals working at the same time by moving the user interval outside of the useEffect. This way the email interval triggers when the state updates and it's added to the dependency array.
The one problem is the user interval that is outside of the useEffect sometimes triggers twice in the console. Not sure if that's because I'm running on a simulator or an error.
const [emailTimer, setEmailTimer] = useState(0);
const [, setUser] = useAtom(userAtom);
const userTimer = setInterval(async () => {
const refreshedUser = auth().currentUser;
console.log('checked user');
if (refreshedUser?.emailVerified) {
clearInterval(userTimer);
setUser(refreshedUser);
} else {
await auth().currentUser?.reload();
}
}, 10000);
useEffect(() => {
const resendEmailTimer = setInterval(() => {
if (emailTimer <= 0) {
clearInterval(resendEmailTimer);
} else {
console.log('second subtracted');
setEmailTimer(emailTimer - 1);
}
}, 1000);
return () => {
clearInterval(userTimer);
clearInterval(resendEmailTimer);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [emailTimer]);

If you have two setIntervals, they work totally independently. Of course, if both intervals change the same variable, both will try to update the variable at the same time and sometimes, it could cause an unexpected result, but that's not your case.
One huge issue your code has is, you're creating an interval every time setUser or emailTimer gets updated. setUser will not change after the initialization but emailTimer gets updated frequently and thus will cause hundreds of setIntervals to be created. If it works correctly, that's a miracle. I'm not sure how it could work when you have one interval.
Correct approach is adding them one time when the page mounts:
useEffect(() => {
const userTimer = setInterval(...);
const resendEmailTimer = setInterval(...);
}, []); // this empty [] is the key
ESLint may complain about react-hooks/exhaustive-deps rule but it doesn't make sense in your case, so simply suppress it. There's a lot of debate on whether this rule should be strictly enforced or not, but that's another topic.
Side note: I don't like the naming of your emailTimer variable. All other intervals have xxxTimer format, and it could easily mislead emailTimer is also an interval, so maybe consider renaming your state variable to emailTimerCount.

React clock glithing after changing timezone

I'm trying to create a React app that will show time and weather based on user input.
To get weather data I send API request containing a name of the city to openweathermap and it returns json containing coordinates(lat, long) which I then use to make another request to ipgeolocation API to get the timezone of this coordinates.
Clock.jsx
const Clock = (props) => {
const [clock, setClock] = useState()
useEffect(() => {
setInterval(() => {
let time = new Date().toLocaleTimeString('en-US', { timeZone: props.timezone });
setClock(time)
console.log(time)
console.log(clock)
}, 1000);
})
return (
<div className={props.className}>
{clock}
</div>
)
}
After cahnging the timezone by making new API request time starts glitching. It frequently changes values between old and new time. What could be the problem?
console.log(time)
console.log(clock)

I can see a couple of issues:
First, you're creating a new interval on every render of the component, because you're not populating the right dependencies in useEffect. Since you're depending on props.tinmezone to update the interval, it should be added to the dependency array. To fix this, you can add props.timezone to useEffect's dependency array.
Second, you're not clearing the interval in your cleanup part of the useEffect. To fix this, return clearInterval() in useEffect.
Here's a working code snippet fixing both issues
useEffect(() => {
const interval = setInterval(() => {
let time = new Date().toLocaleTimeString("en-US", {
timeZone: props.timezone
});
setClock(time);
}, 1000);
return () => clearInterval(interval);
}, [props.timezone]);

Stop executing setInterval function on loading of a new tab in React

I have given a setInterval function inside a useEffect as it has to dispatch an action for every 28 min, and this setInterval will start only when the user is logged in (isLogged variable provides us whether the user is logged in or not), it is working as expected, but if I open a new tab, it starts a new 28 min interval in that new tab which I don't expect.
My Requirement -
Every 28 min there should be a dispatch event.
If the user logs in to one tab and works for 20 min and opens a new
tab, in the next 8 min dispatch event should occur in both the tabs
at the same time.
Code
const isLogged = useSelector((state) => state.userReducer.loggedIn); // provide boolean value
const intervalId = useRef(null);
useEffect(() => {
intervalId.current = setInterval(() => {
// To check in between if user is logged out and to stop setInterval
if(isLogged === false){
clearInterval(intervalId.current);
return;
}
dispatch(refreshUserToken());
}, 1000 * 60 * 28);
return () => {
clearInterval(intervalId.current)
}
},[isLogged])
I don't have any idea on how to do this concept, could someone please help me to solve this problem?
Thanks in Advance !!

How do i get my React components to render in a timely fashion?

I'm working on a react project, and i've been trying to have Message components render at a certain pace, this is what i have now:
const [chatMessages, setChatMessages] = useState([])
function handleSubmit(event) {
event.preventDefault()
const input = inputValue;
setinputValue("")
if (input && inputHandler(input)) {
const newMessages = inputHandler(input)
const interval = setInterval(() => {
if (!newMessages.length) return clearInterval(interval)
setChatMessages([...chatMessages, newMessages.shift()])
}, 500);
}
}
inputHandler() returns an array of objects that i want to add individually to the state, setChatMessages() changes the state, and then the chatMessages state gets mapped to create my Message components.
This code works properly for single messages, but if inputHandler() returns more than 1 message, only one new message is added, and it cycles between all the messages in the array until it stops at the last one.
It seems that the chatMessages state isn't updating between iterations, anyone knows how i can work around this?

First, cache newMessages in a queue after const newMessages = inputHandler(input). Second, check the queue every 500ms, you can use an array to do that. If the queue is not empty, pop the first one.

Ok so i managed to behave like i want it to with this:
let interval = setInterval(() => {
if (!newMessages.length) return clearInterval(interval)
chatMessages = [...chatMessages, newMessages.shift()]
setChatMessages([...chatMessages])
}, 500);
feel like this code is a war crime, but it works