React component design pattern. What do you use?

I often run into a bit more complex Reactjs components to build. Some that change part of their UI, or complete UI, based on some state change. Like login screen that displays "forgot password?" on login errors (only part of login popup UI) or transfer from register screen to "verify password" screen to "registration success/false" screen, which basically change complete popup UI (although really small UI).

What pattern you use for designing those components?

Options I'm thinking about are:

1) define constants in `render()` and then use some basic logic in return part of it

2) @calculated (MobX) method of the component class, or similar component class that returns JSX to be used in `render()`

3) separate each little part into separate component, preferably stateless functional component and then import/require it