loading words...

Feb 07, 2019 09:30:21

React, D3, and hooks

by @swizecteller | 235 words | 🐣 | 116πŸ’Œ

Swizec Teller

Current day streak: 0🐣
Total posts: 116πŸ’Œ
Total words: 32303 (129 pages πŸ“„)

Had a little React Hooks celebration πŸŽ‰ last night. Wanted to wear a party hat. Couldn't find a party hat.

Played around with refactoring an existing dataviz dashboard to hooks. 

Here's what we learned. thread. πŸ‘‡ #200wordsTIL

https://www.youtube.com/watch?v=q5xxyGwTxZs

---

1) Do not refactor your existing code to use hooks. There's little benefit.

---

2) Been using modern React patterns 16.3 onwards? Refactoring to hooks is easy.

state = {} to useState

getDerivedStateFromProps πŸ‘‰useEffect/useMemo

componentDidX πŸ‘‰ useEffect/useMemo

---

3) Don't be like me and use a combination of useEffect and useState when you're really looking for useMemo.

πŸ’‘Lightbulb moment this morning πŸ˜…

---

4) Keep a separate render method. Your component becomes easier to read.

I don't have a name for this pattern yet.

---

5) useState doesn't play well with functions. If you want to save a function (like a D3 layout generator) you have to wrap it in an object.

@dan_abramov am I holding it wrong?

---

Actually, πŸ‘†might be related to functional state updates. You aren't meant to use functions _as_ state.

https://reactjs.org/docs/hooks-reference.html#functional-updates

---

6) Using an object for hooks looks funny in @brian_b_vaughn's React DevTools. You can see state is an object, but not the values.

---

7) Somehow moving to components breaks shouldComponentUpdate for children.

 You don't need it anymore because your memos/effects know just when to update via the [] argument, but that was interesting to find.

---

8) Hooks are great. Definitely try them in new code. 🎣


Originally published at twitter.com

contact: email - twitter / Terms / Privacy