useEffect() not work with a large Component - react-native

Question

I have a problem when try to render a large Component, about more than 300 code lines, and the use Effect() function does not work. I use use Effect() to load data, and storage to state. When I remove all the components that use the state , it works again, after that, I add one by one child component, it still works until about 4 components and take error again. damn, I spend 8 hours to fix and fail. there is my code, I rewrote and you can copy paste it to test. Thanks for your help.
import React, { useEffect, useState } from 'react'
import {
View,
Text,
TouchableOpacity,
ScrollView,
Image,
StyleSheet,
} from 'react-native'
import axios from 'axios'
const HomeDetail = () => {
const icon = { uri: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconfinder.com%2Ficons%2F211614%2Farrow_b_down_icon&psig=AOvVaw1MEXG4kbEmt_x8DBErEnbI&ust=1617875579779000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMCKyqvu6-8CFQAAAAAdAAAAABAD' }
const [data, setData] = useState({})
const [showDescription, setShowDescription] = useState(false)
const [showNearbySchools, setShowNearbySchools] = useState(false)
const [titleNameInput, setTitleNameInput] = useState(false)
const [titleEmailInput, setTitleEmailInput] = useState(false)
const [titlePhoneInput, setTitlePhoneInput] = useState(false)
const [showFooterTab, setShowFooterTab] = useState(false)
const [timeOnRealtor, setTimeOnRealtor] = useState()
useEffect(() => {
const getData = () => {
const options = {
method: 'GET',
url: 'https://realtor.p.rapidapi.com/properties/v2/detail',
params: { property_id: 'R4061264803' },
headers: {
'x-rapidapi-key': '7abe4815e1msh8ad18eb0e589c4cp1fc2e5jsn96386487842d',
'x-rapidapi-host': 'realtor.p.rapidapi.com'
}
};
axios.request(options).then(function (response) {
setData(response.data.properties[0])
}).catch(function (error) {
console.error(error);
});
}
getData();
}, [])
const TextLink = (prop) => {
styles = prop.style ? prop.style : {}
textDecorationLine = prop.underLine ? 'underline' : 'none'
return (
<Text
style={[styles,
{
color: prop.color,
fontSize: prop.fontSize,
textDecorationLine: textDecorationLine
}
]}
onPress={prop.onPress}
>
{prop.text}
</Text>
)
}
const ButtonCustom = (prop) => {
colorText = prop.type ? prop.color : 'red';
colorBackground = prop.type ? 'white' : prop.color;
return (
<TouchableOpacity
style={[prop.style,
{
justifyContent: 'center',
alignItems: 'center',
height: 35,
paddingLeft: 10,
paddingRight: 10,
borderWidth: 1,
borderRadius: 30,
borderColor: prop.color,
backgroundColor: colorBackground,
}
]}
onPress={prop.onPress}
>
<Text style={{
color: colorText,
fontSize: prop.fontSize,
// fontWeight: 'bold',
}}
>
{prop.text}
</Text>
</TouchableOpacity>
)
}
return (
<ScrollView>
<View>
<TextLink text='aaaaaa' color='blue'></TextLink>
</View>
{/* <View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>${data.price ? data.price : 5}/mo</Text>
<View style={{ flexDirection: 'row' }}>
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
</View>
</View>
<Text>{data?.address?.line ? data.address?.line : '---'}, {data?.address.city ? data?.address.city : '--'}, {data?.address.state_code ? data.address.state_code : '--'} {data?.address.postal_code ? data.address.postal_code : '--'}</Text>
</View> */}
{/*<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{
flexDirection: 'row',
width: '100%',
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.beds}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>beds</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }} >{data?.baths}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>baths</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.sqft ? data?.sqft : '--'}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>sqrt</Text>
</View>
<View style={{ paddingRight: 5, marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>
{data?.client_display_flags.allows_cats | data?.client_display_flags.allows_dogs | data?.client_display_flags.allows_dogs_small | data?.client_display_flags.allows_dogs_large ? 'Yes' : 'No'}
</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>pet</Text>
</View>
</View>
<TextLink text='How much home can you afford ?' color='blue' />
<View style={{}}>
{data?.listing_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{data?.listing_status}</Text>
</View>) : null
}
{data?.prop_type | data?.prop_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={.icon} />
<Text>{data?.prop_type, data?.prop_status}</Text>
</View>) : null
}
{timeOnRealtor ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{timeOnRealtor} ons realtor.com®</Text>
</View>) : null
}
{data?.year_built ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>Built in {data?.year_built}</Text>
</View>) : null
}
{1 ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>style
<TextLink text='ASK AGENT' color='blue' />
</Text>
</View>) : null
}
</View>
<TextLink text='MORE DETAILS' color='blue' />
<ButtonCustom text='EMAIL AGENT' color='red' />
</View>
<View style={{ padding: 10, borderColor: 'gray', borderTopWidth: 1, borderBottomWidth: 1 }}>
<TextLink text='SEE MORE ABOUT THIS BUILDING' color='blue' />
</View>
<TouchableOpacity
style={{ padding: 10 }}
onPress={() => setShowDescription(!showDescription)}
>
<Text>Description</Text>
{showDescription ?
(<Text numberOfLines={1} >{data?.description}</Text>) :
(<View>
<Text >{data?.description}</Text>
<TextLink text='MORE' color='blue' />
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showDescription ? 20 : 30,
}}
source={showDescription ? icon : icon}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
padding: 10,
borderBottomColor: 'gray',
borderTopColor: 'gray',
borderWidth: 1,
}}
onPress={() => setShowNearbySchools(!showNearbySchools)}
>
<Text>Nearby Schools</Text>
{showNearbySchools ?
(<Text > Ratings: Elementary {data?.ratings.great_schools_rating} High {data?.ratings.parent_rating}</Text>) :
(<View>
{data?.schools.map((item, index) => {
if (index < 3) {
return (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: index == 3 ? 1 : 0,
borderBottomColor: 'gray'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: item.ratings.great_schools_rating ? 'green' : 'gray',
borderRadius: 40,
}}>
{item.ratings.great_schools_rating ?
(<Text style={{ fontWeight: 'bold' }}>{item.ratings.great_schools_rating}
<Text>/10</Text>
</Text>) : (<Text style={{ fontWeight: 'bold' }}>Not Rated</Text>)
}
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
<Text>{item.funding_type} Grades
<Text style={{ fontWeight: 'bold' }}>{item.grades.range.low} - {item.grades.range.high}</Text>
</Text>
</View>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.distance_in_miles}</Text>
<Text>mi.</Text>
</View>
</View>
)
}
;
})}
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showNearbySchools ? 20 : 30,
}}
source={showNearbySchools ? icon : icon}
/>
</TouchableOpacity>
<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<Text style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
Additional Info
</Text>
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Presented By</Text>
<TextLink text={data?.agents.name} color='blue' />
</View>
<View style={{
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: 'gray'
}}>
<Image
style={{ height: 50, width: 100 }}
source={{ uri: data?.office.photo.href }} />
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Brokered By</Text>
<TextLink text={data?.office.name} color='blue' />
<TextLink text={data?.office.advantage_phone.display_number} color='blue' />
</View>
<View>
<View style={{ flexDirection: 'row' }}>
<Text>Source {data?.mls.name}</Text>
<Text style={{ backgroundColor: 'gray' }}>property ID {data?.mls.id}</Text>
</View>
</View>
</View>
<View style={{ flexDirection: 'row', padding: 10 }}>
<Image style={{ height: 10, width: 10 }} source={icon} />
<Text>Be aware of scrams. Situations like wire transfers are red flags.
<TextLink text=' Read More' color='blue' />
</Text>
</View>
</View>
{
data.photo ?
(<Image style={{ width: '100%', height: 100 }} source={data.photo[0].href} />)
: null
}
<View style={{ padding: 10 }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>More about this property</Text>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Image source={icon} />
<TextLink text={data.building_href} color='blue' />
</View>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold', marginRight: 10 }}>Move in</Text>
<Text>2021-04-20</Text>
<Image style={{ height: 10, width: 10, marginLeft: 10 }} source={icon} />
</View>
<View>
{titleNameInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Name</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Name'
onPressIn={() => setTitleNameInput(true)}
onPressOut={() => setTitleNameInput(false)}
/>
</View>
<View>
{titleEmailInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Email</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Email'
onPressIn={() => setTitleEmailInput(true)}
onPressOut={() => setTitleEmailInput(false)}
/>
</View>
<View>
{titlePhoneInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Phone</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Phone'
onPressIn={() => setTitlePhoneInput(true)}
onPressOut={() => setTitlePhoneInput(false)}
/>
</View>
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
defaultValue='I am interesting in ...'
/>
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}}>
<ButtonCustom text='EMAIL AGENT' type={false} />
<Text> or </Text>
<ButtonCustom Text='CALL AGENT' type={false} />
</View>
<Text>by proceeding ...
<TextLink text='More...' color='blue' />
</Text>
</View>
{showFooterTab ?
(<View style={{
justifyContent: 'center',
alignItems: 'center',
padding: 5,
}}>
<ButtonCustom text='EMAIL AGENT' color='red' type={false} />
<View>
<TextLink text='<' />
<Text>1/200</Text>
<TextLink text='>' />
</View>
</View>)
: null
} */}
</ScrollView>
)
}
export default HomeDetail
const style = StyleSheet.create({
image: {
height: 20,
width: 20,
resizeMode: 'cover',
}
})

Answer 1

oh sorry everyone because of this fundamental error, I misunderstood that the useEffect() is run before render function. I did not create a default state, so when it render, it can take a default value and make an error, and the effect function can run to put data to state :) Thank for reading my problem