T&T: Improve react debug process
When I started using react/react-native i approach it from functional perspective, trying to make everything a function. This include when i try to render custom component. I will try to use functional stateless component (fsc)
.
const LoadingOverlay = (props)=>{
return (
<View>... and any other custom component here</View>
)
}
Recently I change this to use PureComponent
. The main reason for me doing this is not performance but readability and debug. Whenever I try to debug the component using fsc
i will have difficulties looking for that component within DOM. However by using React.createClass
or extending React.Component / React.PureComponent
you can easily find or filter the component based on its class name. This will help you to traverse DOM and debug your custom component.
class LoadingOverlay extends React.Component {
render(){
return(
<View>.... your content here</View>
)
}
}