Stop MapStateToProps executing on screen load - react-native

Question

I have created a register page and I am trying hook up a loading ticker while I create the user account.
I am running into an issue where mapStateToProps() is being executed whenever the screen loads meaning that any values I have being mapped error as the state is undefined. None of my reducers or actions are executing to cause mapStateToProps() to run. Have I set something within my screen to cause this to execute, I completely understand that my state is indeed undefined but why does mapStateToProps even run in the initial load?
.......
interface State {
name: string,
email: string;
mobileNo: string;
password: string;
passwordConf: string;
nameTouched: boolean;
emailTouched: boolean;
mobileNoTouched: boolean;
passwordTouched: boolean;
passwordConfTouched: boolean;
loading: boolean;
}
class RegisterScreen extends React.Component<{
navigation: any;
register: Function}, State> {
emailInputRef = React.createRef<FormTextInput>();
mobileNoInputRef = React.createRef<FormTextInput>();
passwordInputRef = React.createRef<FormTextInput>();
passwordConfInputRef = React.createRef<FormTextInput>();
readonly state: State = {
name: "",
email: "",
password: "",
mobileNo:"",
passwordConf: "",
emailTouched: false,
passwordTouched: false,
nameTouched: false,
mobileNoTouched: false,
passwordConfTouched: false,
loading: false
};
handleNameChange = (name: string) => {
this.setState({ name: name });
};
handleEmailChange = (email: string) => {
this.setState({ email: email });
};
handleMobileNoChange = (mobileNo: string) => {
this.setState({ mobileNo: mobileNo });
};
handlePasswordChange = (password: string) => {
this.setState({ password: password });
};
handlePasswordConfChange = (passwordConf: string) => {
this.setState({ passwordConf: passwordConf });
};
handleNameSubmitPress = () => {
if (this.emailInputRef.current) {
this.emailInputRef.current.focus();
}
};
handleEmailSubmitPress = () => {
if (this.mobileNoInputRef.current) {
this.mobileNoInputRef.current.focus();
}
};
handleMobileNoSubmitPress = () => {
if (this.passwordInputRef.current) {
this.passwordInputRef.current.focus();
}
};
handlePasswordSubmitPress = () => {
if (this.passwordConfInputRef.current) {
this.passwordConfInputRef.current.focus();
}
};
handleNameBlur = () => {
this.setState({ nameTouched: true });
};
handleEmailBlur = () => {
this.setState({ emailTouched: true });
};
handleMobileNoBlur = () => {
this.setState({ mobileNoTouched: true });
};
handlePasswordBlur = () => {
this.setState({ passwordTouched: true });
};
handlePasswordConfBlur = () => {
this.setState({ passwordConfTouched: true });
};
render() {
const {
name,
email,
password,
mobileNo,
passwordConf,
emailTouched,
passwordTouched,
nameTouched,
mobileNoTouched,
passwordConfTouched,
} = this.state;
const nameError =
!name && nameTouched
? strings.NAME_REQUIRED
: undefined;
const emailError =
!email && emailTouched
? strings.EMAIL_REQUIRED
: undefined;
const mobileError =
!mobileNo && mobileNoTouched
? strings.MOBILE_REQUIRED
: undefined;
const passwordError =
!password && passwordTouched
? strings.PASSWORD_REQUIRED
: undefined;
const passwordConfError =
!passwordConf && passwordConfTouched && (password === passwordConf)
? strings.PASSWORD_CONF_REQUIRED
: undefined;
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<Image source={imagePath} style={styles.logo} />
<View style={styles.form}>
{/* Name */}
<FormTextInput
keyboardType={"default"}
value={this.state.name}
onChangeText={this.handleNameChange}
onSubmitEditing={this.handleNameSubmitPress}
placeholder={strings.NAME_PLACEHOLDER}
autoCorrect={false}
returnKeyType="next"
onBlur={this.handleNameBlur}
error={nameError}
/>
{/* Email */}
<FormTextInput
keyboardType={"email-address"}
ref={this.emailInputRef}
value={this.state.email}
onChangeText={this.handleEmailChange}
onSubmitEditing={this.handleEmailSubmitPress}
placeholder={strings.EMAIL_PLACEHOLDER}
autoCorrect={false}
returnKeyType="next"
onBlur={this.handleEmailBlur}
error={emailError}
/>
{/* MobileNo */}
<FormTextInput
keyboardType={"numeric"}
ref={this.mobileNoInputRef}
value={this.state.mobileNo}
onChangeText={this.handleMobileNoChange}
onSubmitEditing={this.handleMobileNoSubmitPress}
placeholder={strings.MOBILE_PLACEHOLDER}
autoCorrect={false}
returnKeyType="next"
onBlur={this.handleMobileNoBlur}
error={mobileError}
/>
{/* Password */}
<FormTextInput
keyboardType={"default"}
ref={this.passwordInputRef}
value={this.state.password}
onChangeText={this.handlePasswordChange}
onSubmitEditing={this.handlePasswordSubmitPress}
placeholder={strings.PASSWORD_PLACEHOLDER}
secureTextEntry={true}
returnKeyType="done"
onBlur={this.handlePasswordBlur}
error={passwordError}
/>
{/* Password Conf */}
<FormTextInput
keyboardType={"default"}
ref={this.passwordConfInputRef}
value={this.state.passwordConf}
onChangeText={this.handlePasswordConfChange}
placeholder={strings.PASSWORD_CONF_PLACEHOLDER}
secureTextEntry={true}
returnKeyType="done"
onBlur={this.handlePasswordConfBlur}
error={passwordConfError}
/>
<ActivityIndicator animating={true} />
<Button
title="Register"
onPress={() => this.props.register(
name,
email,
mobileNo,
password)}
disabled={!email || !password || !name || !password || !passwordConf}
/>
</View>
</KeyboardAvoidingView>
);
}
}
const mapStateToProps = (state) => {
console.log(this.state);
//On screen load this executes with state = undefined, not sure what's causing it to fire
return {
loading : state.creatingUser
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({register: register}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(RegisterScreen);

Answer 1

React Redux tries to improve performance by doing shallow equality reference checks on incoming props in shouldComponentUpdate but you need to remember that
shouldComponentUpdate method is not called for the initial render therfore mapStateToProps will run in the initial load