Skip to content

Instantly share code, notes, and snippets.

@ylastapis
Last active April 19, 2019 07:33
Show Gist options
  • Save ylastapis/c196be7c3969d0c7d8e32e5497175e20 to your computer and use it in GitHub Desktop.
Save ylastapis/c196be7c3969d0c7d8e32e5497175e20 to your computer and use it in GitHub Desktop.
React / Redux Best practices
// Avoid anonymous functions
// Don't do this!
function Component(props) {
return <AnotherComponent onChange={() => props.callback(props.id)} />
}
// Do this instead :)
function Component(props) {
const handleChange = useCallback(() => props.callback(props.id), [props.id]);
return <AnotherComponent onChange={handleChange} />
}
// Avoid inline objects
// Don't do this!
function Component(props) {
const aProp = { someProp: 'someValue' }
return <AnotherComponent style={{ margin: 0 }} aProp={aProp} />
}
// Do this instead :)
const styles = { margin: 0 };
function Component(props) {
const aProp = { someProp: 'someValue' }
return <AnotherComponent style={styles} {...aProp} />
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment