Andrei Xavier de Oliveira Calazans AndreiCalazans

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

React Native Upgrade path

Change React and React Native version on package.json
run yarn install to upgrade dependencies
run yarn outdated or yarn upgrade-interactive libraries that are outdated (make sure that there's no breaking changes, check release notes (one by one))
check the diff or use the upgrade-helper and update the native code
open Xcode and link the binaries
run on iOS
test iOS
run on Android
test Android


	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions

	import { Composition, ViewRef, TextRef, TextInputRef, ButtonRef } from '@youi/react-native-youi';

	export default class TrialButtonExample extends React.Component {
	render() {
	return (
	<Composition source="MyAEComposition_Screen">
	<ViewRef name="ProductDescriptionView">
	<ButtonRef name="TrialButton" />
	</ViewRef>
	</Composition>

	import {
	Composition,
	ViewRef,
	TextRef,
	TextInputRef,
	ButtonRef
	} from '@youi/react-native-youi';
	import { Hero, MovieThubnail } from './shared-components';

	export default class MovieLanderRef React.Component {

	import {
	Composition,
	ViewRef,
	TextRef,
	TextInputRef,
	ButtonRef
	} from '@youi/react-native-youi';

	export default class Login React.Component {
	render() {

	import { useEffect, useRef } from 'react';

	export const useEventEmitter = (eventEmitter, eventName: string, fn: () => void) => {
	const subscription = useRef(null);

	useEffect(() => {
	subscription.current = eventEmitter.addListener(eventName, fn);

	return () => {
	if (subscription.current) {

	import { danger, schedule, message, warn, fail, markdown } from 'danger'

	const { readFileSync } = require('fs')
	const child_process = require('child_process')

	const { sentence } = danger.utils

	const verifyBundleStats = () => {
	const currentBuildResults = JSON.parse(
	readFileSync('./build/bundle-stats.json')

	function propsAreEqual(prev, next) {
	return prev.isFavorite === next.isFavorite;
	}

	const Row = memo(({ title, isFavorite, onPress }) => {
	return (
	<React.Fragment>
	<View style={styles.row}>
	<Text style={styles.rowText}>{title}</Text>
	<IconButton