Question

0

108

Views

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

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.

5 months ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-24T17:10:37.722Z

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