dispatchAction error of rerender limits in react native application - reactjs

Question

Am I doing something wrong here? I'm trying to get some data, but its returning errors in my console log, saying something about rerendering
mycompontent:
const Link = (props) => {
const { state, scrape } = useContext(ScrapeContext);
const [clipboard, setClipboard] = useState('');
const [googleClip, setGoogleClip] = useState(false);
const [googleLink, setGoogleLink] = useState('');
const urlFromClipboard = () => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
console.log('inside includes');
setGoogleClip(true);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?somedata`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
scrape({ googleLink });
}
}
useEffect(() => {
urlFromClipboard();
}, [clipboard]);
return (
<View style={styles.container}>
<View style={styles.inputFieldContainer}>
<TextInput
style={styles.inputField}
placeholder='Enter Google url'
autoCapitalize='none'
autoCorrect={false}
value={googleClip ? clipboard : ''}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
urlFromClipboard();
}}
style={styles.touchSubmit}
>
<Text style={styles.touchText}>Submit</Text>
</TouchableOpacity>
</View>
{state.errorMessage ? (
<Text style={styles.errorMessage}>{state.errorMessage}</Text>
) : null}
</View>
);
}
scrape context file:
const scrape = (dispatch) => {
console.log('dispatch scrape', dispatch)
return async ({googleLink}) => {
console.log('scrape googleLink',googleLink);
try {
const response = await googleApi.post('/googleLink', {googleLink});
dispatch({ type: 'googleLink', payload: response });
navigate('NewPage');
} catch (error) {
dispatch({
type: 'googleLink_error',
payload: 'Please submit correct Google link.'
})
}
}
}
I got the data in my backend to respond correctly, but it's failing to finish what its intended, on the frontend side. The console.log('dispatch scrape', dispatch) is giving me an error in my console:
dispatch scrape function dispatchAction(fiber, queue, action) {
(function () {
if (!(numberOfReRenders < RE_RENDER_LIMIT)) {
throw ReactError(Error("Too many re-renders. React limits the number …
It doesn't produce the entire error until I hover over it... saying more inline about "to prevent infinite loop..." Here's the screenshot:

Answer 1

it looks like every render is setting clipboard to a new value, triggering useEffect in each new render, thus causing an infinite loop. I'm new to react native, and have been suffering a lot from infinite loop myself. Not sure it helps to change the useEffect's dependency to the function urlFromClipboard, and wrap urlFromClipboard in a callback function, of course set clipboard as dependency of the callback function:
const urlFromClipboard = useCallback(() => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')) {
console.log('inside includes');
setGoogleClip(true);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?somedata`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
scrape({ googleLink });
}
}, [clipboard])
useEffect(() => {
urlFromClipboard();
}, [urlFromClipBoard]);