why content in console.log is printed infinite time in react native return statement

user_11099513 0
Viewed 79

I am new to React Native, I just want to check the console.log statement inside the return statement of a function but when I check the console the contents of console.log is printing infinitely in the console tab. can anyone explain why this is happening? Below is the code I am checking with, Thanks in advance.

import * as React from'react';
import { Text, View } from 'react-native';
function ExportFile() {
    var RNFS = require('react-native-fs');
    return (
        <View>
        <Text>
            ExportFile
            {
                console.log("hello")
                
            }
        </Text>
        </View>
    );
}

export default ExportFile;

Below is my console output.

Console-output

react-native reactjs console.log infinite-loop javascript
1 Answers

this is because the component keeps re-rendering. Every time it re-renders the statement is logged again. You should move the console.log to useEffect preferably. Something like:

import * as React from'react';
import { Text, View } from 'react-native';

function ExportFile() {
    //only call console.log on component mount
    React.useEffect(()=>{
        console.log("hello")
    },[])

    var RNFS = require('react-native-fs');
    return (
        <View>
        <Text>
            ExportFile
        </Text>
        </View>
    );
}

export default ExportFile;

This will only console.log on the component mount. You can add dependencies to the useEffect of course to log on basis of a dependency change. For more info, check out official docs: https://reactjs.org/docs/hooks-effect.html

user_143070940
Related