N Things You Don't Want to Repeat in React Native

N Things You Don’t Want to
Repeat in React Native
Antipatterns and pitfalls

JavaScript, React
Redux / MobX / ...
Java & Objective C
Android & iOS
React Native

A lot of opportunities
for bad code & design

$ npm i -g react-native-cli
$ react-native init TheNextBigThing
$ npm i
$ npm run start
$ react-native run-android
$ react-native run-ios

─ Let’s update React Native!
─ Sorry, I know I’ve asked only for Android version, may we add iOS
support after 3 months of development?
─ We need push notifications and in app purchases
─ YAHOOOOO! Our library has updated!
─ Play around with some animations
─ Windows Phone support…?
─ Actions, reducers, immutability, higher order components, etc
─ Where to store X? AsyncStorage? Redux? Local State?
─ So what’s about Windows Phone?
Hello? Is there anybody?

React Component Lifecycle
componentWillMount General Configurations, sockets / services init
componentDidMount Loading data, setState
componentWillReceiveProps Update state based on new props
shouldComponentUpdate Optimization
componentWillUpdate Something before render (no setState)
componentDidUpdate Something after render ¯_(ツ)_/¯
componentWillUnmount Clean, remove listeners

React
1. props in initialState
2. setTimeout, setInterval
3. Not using defaultProps and propTypes
4. Impure render()
5. Logic in render()
6. setState() in componentWillMount()
7. Mutating state
8. Strings refs
9. Usings indexes as keys
10. Not using core components principles (smart, dump, higher-order components)

1. Props in Initial State
class SomeComponent extends Component {
constructor(props) {
super(props);
this.state = {
displayMe: this.props.data
}
}
render() {
return (
<Text>{ this.state.displayMe }</Text>
);
}
}
render() {
return (
<Text>
{this.props.displayMe}
</Text>
);
}
}

2. setTimeout
setInterval
class LightSwitch extends Component {
state = {
on: false
};
toggle = () => {
this.setState({
on: !this.state.on
})
};
handleClick = () => {
this.props.setTimeout(this.toggle, 5000);
};
render () {
const { on } = this.state;
const bgColor = on ? 'yellow' : 'gray';
return (
<View style={{ backgroundColor: bgColor }}>
<TouchableOpacity onClick={this.handleClick}>
Toggle!
</TouchableOpacity>
</View>
);
}
}
export default ReactTimeout(LightSwitch);

3. Not using Default props & Prop Types
import PropTypes from 'prop-types';
class SampleComponent extends Component {
static propTypes = {
item: PropTypes.object
};
static defaultProps = {
item: { name: '', price: 0 }
};
render() {
return (
<View>
<Text>this.props.item.name</Text>
<Text>this.props.item.price</Text>
</View>
);
}
}

4. Impure render()
5. Logic in render()

6. setState in componentWillMount
componentWillMount() {
axios.get('/api/users').then(res => {
this.setState({users: res.data.users});
});
}
// ...
}
componentDidMount() {
axios.get('/api/users').then(res => {
this.setState({users: res.data.users});
});
}
// ...
}

7. Mutating State
super(props);
this.state = { items: ['foo', 'bar'] };
}
this.state.items.push('lorem');
this.setState({ items: this.state.items });
};
render() {
return (
<View>
{this.state.items.length}
+
</TouchableOpacity>
</View>
)
}
}
super(props);
this.state = { items: ['foo', 'bar'] };
}
this.setState({
items: this.state.items.concat('lorem')
});
};
render() {
return (
<View>
{this.state.items.length}
+
</TouchableOpacity>
</View>
)
}
}

8. String Refs
render() {
return (
<View>
<TextInput ref={'txtInput'}/>
</View>
);
}
}
render() {
return (
<View>
<TextInput ref={txtInput => {
this.txtInput = txtInput }}/>
</View>
);
}
}

9. Using indexes as keys
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
{todos.map((todo) =>
<Todo
{...todo}
key={todo.id}
/>
)}

10. Not using Dumb / Smart / Higher Order
Components concepts

Redux
1. Wrong FLUX understanding & wrong store structure
2. Dumb mapStateToProps
3. Form validation with redux store
4. Too much dispatches
5. Business logic in reducers

2. Dump mapStateToProps
class ConfInfo extends Component {
conference: PropTypes.shape({
name: PropTypes.string,
type: PropTypes.string,
talks: PropTypes.array
}),
attendees: PropTypes.array
};
render() {
const { conference } = this.props;
const { talks, type } = conference;
// usage
}
}
function mapStateToProps({ conference, attendees }) {
return { conference, attendees };
}
export default connect(mapStateToProps)(ConfInfo);
class ConfInfo extends Component {
type: ConferenceTypeShape,
talks: ArrayOfConferenceTalksShapes
};
render() {
const { talks, type } = this.props;
// usage
}
}
function mapStateToProps({ conference }) {
const { talks, type } = conference;
return { talks, type };
}
export default connect(mapStateToProps)(ConfInfo)

3. Form Validation with Redux
4. Too Much Dispatches
5. Business Logic in Reducers

Where to store X?
AsyncStorage Cache, cross session data
Local State UI state & Forms data
Redux Store App State & Cross component data
this Data, that does not trigger updates
static Utils

React Native
1. Updates just for updates
2. Imprudent packages choosing
3. Being scary about native code
4. Estimating Android & iOS equally
5. Developing Android & iOS in a sequence
6. Not testing on devices
7. Relying on JS single thread (animations, calculations, etc)
8. Using z-index a lot

7. Worker polyfill
// sample.worker.js
import { WorkerService } from 'rn-worker';
const worker = new WorkerService();
worker.onmessage = message => {
worker.postMessage(`Hello from the other side (${message})`)
};
// sample.component.js
import { Worker } from 'rn-worker';
export class Sample extends React.Component {
componentDidMount () {
const PORT = 8083;
this.worker = new Worker(PORT);
this.worker.onmessage = message => this.setState({
text: message
});
this.worker.postMessage("Hey Worker!")
}
componentWillUnmount () {
this.worker.terminate();
}
}

Thank You!
Will be happy to answer your questions now, after
conf and online:
kulyk.anton
kuliks.anton@gmail.com

N Things You Don't Want to Repeat in React Native

More Related Content

What's hot (20)

Similar to N Things You Don't Want to Repeat in React Native (20)

Recently uploaded (20)

N Things You Don't Want to Repeat in React Native