[Problem]
I have a HTML Input element to focus on inside my bottomsheet which is hidden by default. I would like to focus on it when bottomsheet is shown, but I am keep missing it.
[What I've tried]
I already tried autoFocus={true} but it didn't work.
I tried the following, still not working.
const bottomSheetPage = (props) => {
const [bottomSheetOn, setBottomSheetOn] = useState(false)
const inputRef = useRef<HTMLInputElement>(null)
~~~ some codes ~~~
useEffect ( () => {
if(props.autoFocus) {
inputRef?.current?.focus()
}
}, [isBottomsheetOn])
~~~ some codes ~~~
<input ref={inputRef}/>
bottomSheetOn is state that controls the toggle of bottomsheet and checked that prop.autoFocus === true.
How can I focus on the element inside bottomsheet when it's shown?
This could have one of two reasons:
props.autoFocus is false
props.autoFocus is true, but useEffect is only called when isBottomsheetOn changes
Try adding props.autoFocus to the list of useEffect dependencies and console.log/debugger inside useEffect to make sure it is called correctly.
useEffect ( () => {
if(props.autoFocus) {
inputRef?.current?.focus()
}
}, [isBottomsheetOn, props.autoFocus]) // will be triggered on props.autoFocus change
If that doesn't help, try to set the focus manually to make sure it's not a problem with the input ref.
import { useState, useEffect, useRef } from 'react'
export default function Component(props) {
const inputRef = useRef(null)
const [on, setOn] = useState(true)
useEffect ( () => {
if (on) {
inputRef?.current?.focus()
}
}, [on])
return (
<>
<input ref={inputRef}/>
<button onClick={() => setOn(prev => !prev)}>Focus</button>
</>
)
}
I found several ways to fix this up, and there was two methods I've actually tried. Either with different advantages.
using IntersectionObserver and setTimeout
you can check if one element intesects other by IntersectionObserver.observe() so I made a recrurring function to check intersection, and then set focus when it's intersecting. Codes is as follows.
const [ticker, setTicker] = useState(true)
const [isIntersecting, setIntersecting] = useState(false)
const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))
useEffect(() => {
if(props.autoFocus) {
if(inputRef?.current) {
if (isIntersecting) {
inputRef.current.focus()
} else {
setTimerout(() => setTicker(!ticker), 500)
}
}
}
return () => {observer.disconnect()}
}, [ticker])
But this method was focusing on element only once. I needed to focus on it everytime it's shown.
using setTimeout
I figured out that problem was there's time needed for rendering toggled bottomsheet, so I simply gave timeout for focus. And it worked out.
useEffect(() => {
if (focusRef?.current) {
setTimeout(setFocus, 1000)
}
})
const setFocus = () => {
if (focusRef?.current){
focusReft.focus()
}
}
Related
I'm trying to 'move' in my 10x10 grid by updating the activeCellId state. However none of the methods I tried works. This is my code.
const GridCells: React.FC = () => {
const gridArray = [...Array(100).keys()];
const color = [
"bg-slate-50",
"bg-slate-100",
"bg-slate-200",
"bg-slate-300",
"bg-slate-400",
"bg-slate-500",
"bg-slate-600",
"bg-slate-700",
"bg-slate-800",
"bg-slate-900",
];
const [activeCellId, setActiveCellId] = useState(42);
// useEffect(() => {
// document.addEventListener("keydown", updateActiveCellId, false);
// }, []); // this doesn't work. the activeCellId is only incremented once, and afterwards the setActiveCellId doesn't get called at all
const updateActiveCellId = (e: React.KeyboardEvent) => {
// will eventually be a switch case logic here, for handling arrow up, left, right down
console.log(activeCellId);
setActiveCellId(activeCellId + 1);
};
return (
<div
className="grid-rows-10 grid grid-cols-10 gap-0.5"
// onKeyDown={updateActiveCellId} this also doesn't work
>
{gridArray.map((value, id) => {
const colorId = Math.floor(id / 10);
return (
<div
key={id}
className={
"h-10 w-10 "
+ color[colorId]
+ (id === activeCellId ? " scale-125 bg-yellow-400" : "")
}
>
{id}
</div>
);
})}
</div>
);
};
I'm trying to update a state in the react component by pressing certain keys. I've tried UseEffect with [] dep array and tried onKeyDown and it also doesn't work. I also tried following this useRef way it doesn't work too.
const innerRef = useRef(null);
useEffect(() => {
const div = innerRef.current;
div.addEventListener("keydown", updateActiveCellId, false);
}, []); // this doesn't work at all
const updateActiveCellId = (e: React.KeyboardEvent) => {
console.log(activeCellId);
setActiveCellId(activeCellId + 1);
};
return (
<div
className="grid-rows-10 grid grid-cols-10 gap-0.5"
ref={innerRef}
>
...
)
Try this:
useEffect(() => {
document.addEventListener("keydown", updateActiveCellId, false);
return () => {
document.removeEventListener("keydown", updateActiveCellId, false);
}
}, [activeCellId]);
The [activeCellId] is the dependency of useEffect. Everytimes activeCellId changes, the function inside useEffect will run.
You had an empty dependency, so it ran on initial component mount only.
The returned function containing removeEventListner is executed when the component unmounts (See cleanup function in the docs). That is to ensure you have only one event listener runnign at once.
Documentation
I have an 'Accept' button which I would like to be automatically clicked after 5 seconds. I'm using React with Next.js. The button code is:
<button name="accept" className="alertButtonPrimary" onClick={()=>acceptCall()}>Accept</button>
If I can't do this, I would like to understand why, so I can improve my React and Next.js skills.
I'm guessing you want this activated 5 seconds after render, in that case, put a setTimeout inside of the useEffect hook, like so. this will call whatever is in the hook after the render is complete.
Although this isn't technically activating the button click event.
useEffect(() => {
setTimeout(() => {
acceptCall()
}, timeout);
}, [])
in that case you should use a ref like so,
const App = () => {
const ref = useRef(null);
const myfunc = () => {
console.log("I was activated 5 seconds later");
};
useEffect(() => {
setTimeout(() => {
ref.current.click();
}, 5000); //miliseconds
}, []);
return (
<button ref={ref} onClick={myfunc}>
TEST
</button>
);
};
Hopefully, this is what you are looking for.
https://codesandbox.io/s/use-ref-forked-bl7i0?file=/src/index.js
You could create a ref for the <button> and set a timeout inside of an effect hook to call the button click event after 5 seconds.
You could throw in a state hook to limit the prompt.
import React, { useEffect, useRef, useState } from "react";
const App = () => {
const buttonRef = useRef("accept-button");
const [accepted, setAccepted] = useState(false);
const acceptCall = (e) => {
alert("Accepted");
};
const fireEvent = (el, eventName) => {
const event = new Event(eventName, { bubbles: true });
el.dispatchEvent(event);
};
useEffect(() => {
if (!accepted) {
setTimeout(() => {
if (buttonRef.current instanceof Element) {
setAccepted(true);
fireEvent(buttonRef.current, "click");
}
}, 5000);
}
}, [accepted]);
return (
<div className="App">
<button
name="accept"
className="alertButtonPrimary"
ref={buttonRef}
onClick={acceptCall}
>
Accept
</button>
</div>
);
};
export default App;
I am trying to useFocusEffect to rerender a component in my view when I focus the view.
I did:
const [theKey, setTheKey] = useState(0);
Then:
useFocusEffect(() => { setTheKey(theKey + 1) }, [theKey]);
And the jsx:
<SwipeListView key={theKey} />
It does not work well, I have the errror: Maximum update depth exceeded
Can someone share a way to rerender it?
I do not have this issue with react router.
Issue is here:
useFocusEffect(() => { setTheKey(theKey + 1) }, [theKey]);
Inside this function you update theKey. And each time theKey gets updated the effect gets called again. This results in an infinite loop.
There are 2 solutions:
Remove theKey dependency:
useFocusEffect(
() => { setTheKey(theKey + 1) },
["replace with something else"]
);
Add a condition before updating the state:
useFocusEffect(
() => { if ("some condition") setTheKey(theKey + 1) },
[theKey]
);
This will prevent the infinite loop.
I also encountered issue with useFocusEffect. Either it triggers infinite loop / render, or it keeps a stale version of the function.
const [count, setCount] = useState(1);
const doSomething = useCallback(() => {
console.log(count);
setCount(count + 1);
}, [count]);
useFocusEffect(
useCallback(() => {
doSomething(); // Count will always be 1 (cached value)
}, [doSomething])
);
useFocusEffect(
useCallback(() => {
doSomething(); // Latest count, but infinite loop due to doSomething() is recreated when count changes
}, [doSomething])
);
Instead, can try with the combination of useIsFocus and usePrevious which works well with existing useEffect method.
import { useIsFocused } from "#react-navigation/native";
import { useEffect, useRef } from "react";
// usePrevious custom hook
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
const isFocused = useIsFocused();
const prevIsFocused = usePrevious(isFocused);
useEffect(() => {
if (!prevIsFocused && isFocused) {
// Run your code here
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFocused]);
I'm trying to use the IntersectionObserver API to trigger animations when an element gets into the viewport on my Gatsby site. Actually, it works as expected. There is just one thing I can't wrap my head around. After the component mounts, the observer gets triggered and fires 'true' as if the element had been into the viewport. Here is the code of my useOnScreen hook and React component:
import { useState, useEffect } from "react"
const useOnScreen = (ref, rootMargin = "0px") => {
const [isIntersecting, setIntersecting] = useState(false)
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIntersecting(entry.isIntersecting)
},
{
rootMargin,
}
)
if (ref.current) {
observer.observe(ref.current)
}
return () => {
observer.unobserve(ref.current)
}
}, [])
console.log("isIntersecting", isIntersecting)
return isIntersecting
}
const About = ({ content }) => {
const { frontmatter, body } = content[0].node
useEffect(() => console.log("About.js - isMounted"), [])
const ref = useRef();
const onScreen = useOnScreen(ref, "-100px")
return (
<StyledSection id="about">
<StyledContentWrapper>
<motion.div className="inner-wrapper" ref={ref} animate={fade(onScreen)}>
<h3 className="section-title">{frontmatter.title}</h3>
<div className="text-content">
<MDXRenderer>{body}</MDXRenderer>
</div>
</motion.div>
</StyledContentWrapper>
</StyledSection>
)
}
If I load the page/component, I get the following console log:
isIntersecting false | useOnScreen.js:27
About.js - isMounted | about.js:67
isIntersecting true | useOnScreen.js:27
isIntersecting false | useOnScreen.js:27
Does anyone know why the observer gets triggered after the component is mounted?
I am currently solving the issue by running the observer.observe(ref.current) line with a setTimeout of 1000ms. This solves it but I am not sure if this is the proper way of doing it?
This question already has answers here:
Make React useEffect hook not run on initial render
(16 answers)
Closed last month.
I'm trying to use the useEffect hook inside a controlled form component to inform the parent component whenever the form content is changed by user and return the DTO of the form content. Here is my current attempt
const useFormInput = initialValue => {
const [value, setValue] = useState(initialValue)
const onChange = ({target}) => {
console.log("onChange")
setValue(target.value)
}
return { value, setValue, binding: { value, onChange }}
}
useFormInput.propTypes = {
initialValue: PropTypes.any
}
const DummyForm = ({dummy, onChange}) => {
const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
const {value: bar, binding: barBinding} = useFormInput(dummy.value)
// This should run only after the initial render when user edits inputs
useEffect(() => {
console.log("onChange callback")
onChange({foo, bar})
}, [foo, bar])
return (
<div>
<input type="text" {...fooBinding} />
<div>{foo}</div>
<input type="text" {...barBinding} />
<div>{bar}</div>
</div>
)
}
function App() {
return (
<div className="App">
<header className="App-header">
<DummyForm dummy={{value: "Initial"}} onChange={(dummy) => console.log(dummy)} />
</header>
</div>
);
}
However, now the effect is ran on the first render, when the initial values are set during mount. How do I avoid that?
Here are the current logs of loading the page and subsequently editing both fields. I also wonder why I get that warning of missing dependency.
onChange callback
App.js:136 {foo: "Initial", bar: "Initial"}
backend.js:1 ./src/App.js
Line 118: React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
r # backend.js:1
printWarnings # webpackHotDevClient.js:120
handleWarnings # webpackHotDevClient.js:125
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:190
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent # eventtarget.js:56
(anonymous) # main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage # main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:53
WebSocketTransport.ws.onmessage # websocket.js:36
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial"}
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial2"}
You can see this answer for an approach of how to ignore the initial render. This approach uses useRef to keep track of the first render.
const firstUpdate = useRef(true);
useLayoutEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
} else {
// do things after first render
}
});
As for the warning you were getting:
React Hook useEffect has a missing dependency: 'onChange'
The trailing array in a hook invocation (useEffect(() => {}, [foo]) list the dependencies of the hook. This means if you are using a variable within the scope of the hook that can change based on changes to the component (say a property of the component) it needs to be listed there.
If you are looking for something like componentDidUpdate() without going through componentDidMount(), you can write a hook like:
export const useComponentDidMount = () => {
const ref = useRef();
useEffect(() => {
ref.current = true;
}, []);
return ref.current;
};
In your component you can use it like:
const isComponentMounted = useComponentDidMount();
useEffect(() => {
if(isComponentMounted) {
// Do something
}
}, [someValue])
In your case it will be:
const DummyForm = ({dummy, onChange}) => {
const isComponentMounted = useComponentDidMount();
const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
const {value: bar, binding: barBinding} = useFormInput(dummy.value)
// This should run only after the initial render when user edits inputs
useEffect(() => {
if(isComponentMounted) {
console.log("onChange callback")
onChange({foo, bar})
}
}, [foo, bar])
return (
// code
)
}
Let me know if it helps.
I create a simple hook for this
https://stackblitz.com/edit/react-skip-first-render?file=index.js
It is based on paruchuri-p
const useSkipFirstRender = (fn, args) => {
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) {
console.log('running')
return fn();
}
}, args)
useEffect(() => {
isMounted.current = true
}, [])
}
The first effect is the main one as if you were using it in your component. It will run, discover that isMounted isn't true and will just skip doing anything.
Then after the bottom useEffect is run, it will change the isMounted to true - thus when the component is forced into a re-render. It will allow the first useEffect to render normally.
It just makes a nice self-encapsulated re-usable hook. Obviously you can change the name, it's up to you.
You can use custom hook to run use effect after mount.
const useEffectAfterMount = (cb, dependencies) => {
const mounted = useRef(true);
useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
Here is the typescript version:
const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
const mounted = useRef(true);
useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
Example:
useEffectAfterMount(() => {
console.log("onChange callback")
onChange({foo, bar})
}, [count])
I don't understand why you need a useEffect here in the first place. Your form inputs should almost certainly be controlled input components where the current value of the form is provided as a prop and the form simply provides an onChange handler. The current values of the form should be stored in <App>, otherwise how ever will you get access to the value of the form from somewhere else in your application?
const DummyForm = ({valueOne, updateOne, valueTwo, updateTwo}) => {
return (
<div>
<input type="text" value={valueOne} onChange={updateOne} />
<div>{valueOne}</div>
<input type="text" value={valueTwo} onChange={updateTwo} />
<div>{valueTwo}</div>
</div>
)
}
function App() {
const [inputOne, setInputOne] = useState("");
const [inputTwo, setInputTwo] = useState("");
return (
<div className="App">
<header className="App-header">
<DummyForm
valueOne={inputOne}
updateOne={(e) => {
setInputOne(e.target.value);
}}
valueTwo={inputTwo}
updateTwo={(e) => {
setInputTwo(e.target.value);
}}
/>
</header>
</div>
);
}
Much cleaner, simpler, flexible, utilizes standard React patterns, and no useEffect required.