So, I have simple code (class) like this:

export default class LoginAction {
  isLoggedIn = () => {
    return true
  }
}

And I used it in my other classes like this:

export default class Main extends Component {
  render = () => {
    const loginAction = new LoginAction()

    if (loginAction.isLoggedIn()) {
      return (
        <View style={{ flex: 1 }}>
          <Header headerText={'Post List'} />
          <PostList />
        </View>
      )
    }

    ....... (split)
  }
}

The question is, when I change the return value on the isLoggedIn function, why Main ponent not re-rendered?

It's React Native, and I use Hot Reloading.

So, I have simple code (class) like this:

export default class LoginAction {
  isLoggedIn = () => {
    return true
  }
}

And I used it in my other classes like this:

export default class Main extends Component {
  render = () => {
    const loginAction = new LoginAction()

    if (loginAction.isLoggedIn()) {
      return (
        <View style={{ flex: 1 }}>
          <Header headerText={'Post List'} />
          <PostList />
        </View>
      )
    }

    ....... (split)
  }
}

The question is, when I change the return value on the isLoggedIn function, why Main ponent not re-rendered?

It's React Native, and I use Hot Reloading.

• javascript
• authentication
• reactjs
• react-native
• ecmascript-6

1 Answer 1

A ponent re-renders only in 2 situations:

• if its state has changed
• if the received props have changed

In your Main ponent, none of these situations happen.

To fix it, you could pass isLoggedIn to your ponent:

// index.js

const loginAction = new LoginAction()
let isLoggedIn = loginAction.isLoggedIn()

const setLoggedUser = user => {
  loginAction.setLoggedUser(user)
  isLoggedIn = true
}

ReactDOM.render(
  <div>
    {!isLoggedIn && <Login setLoggedUser={setLoggedUser} />}
    <Main isLoggedIn={isLoggedIn} />
  </div>,
  document.getElementById('root')
)

And use this prop in your ponent's render:

export default class Main extends Component {
  render = () => {
    if (this.props.isLoggedIn) {
      return (
        <View style={{ flex: 1 }}>
          <Header headerText={'Post List'} />
          <PostList />
        </View>
      )
    }
    ...
  }
}

In doing so, your ponent will re-render when isLoggedIn changes.