20190130 - React - displayName - Lightning Talk

A lightning talk I gave in 2019 on React displayName usage.

1. React:
displayName
Because trying to debug a nest of Unknown
components is kind of meh..

2. Functional Components

3. React 16.6
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

4. React.memo
Like React.PureComponent, but functional!
https://reactjs.org/docs/react-api.html#reactmemo

5. Memoized Functional Components

6. React Developer Tools

7. Memo -> Memo -> Unknown -> WTF?

8. displayName?
https://reactjs.org/docs/react-component.html#displayname

9. Maybe not..?
ES6 ‘Fat Arrow’ anonymous function
Named function

10. Wrapping Display Name
https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-fo
r-easy-debugging

11. memoWithDisplayName
app/javascript/src/shared/react-helpers.js

12. memoWithDisplayName

13. Components.. withDisplayName(s)!

14. But how do I know when I need it?

15. But how do I know when I need it?

16. But how do I know when I need it?
ESLint

17. ESLint: react/display-name
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

18. Thank you!