search

oliverjam / intro-react-workshop

8 stars 2 forks source link

Hooks proposal #6

Open oliverjam opened 5 years ago

oliverjam commented 5 years ago

So there's a proposal implementation in the React 16.7 alpha for hooks. They are pretty cool and are already looking like becoming the new de facto way to achieve almost everything in React.

Unfortunately it's a big syntax change so we need to make some decisions about what we cover in React Week.

Hooks overview

tl;dr, this:

class Counter extends React.Component {
  state = { count: 0 }
  render() {
    return <button onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}>{this.state.count}</button>
  }
}

becomes this:

function Counter () {
  const [count, setCount] = useState(0);
  return <button onClick={() => setState(prevCount => prevCount + 1}>{count}</button>
}

Our dilemma

This is great but it puts the upcoming React Week in a tough position, as we have to decide whether to stick to the "old" syntax or teach something that may only just be released. We also have to consider that almost all React code students will see afterwards will be non-hooks syntax.

Teaching hooks benefits

Teaching hooks downsides

Conclusion

I'm not sure 🤷‍♂️.

I think if hooks aren't officially out of alpha by React Week then we can't teach them (I'm not telling students to npm i react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2 😆).

If they are officially released then ideally I would like to use hooks to introduce stateful components and maybe teach classes as a legacy thing that they will see around but don't need to spend too much time on. This will hopefully maximise the benefits above whilst mitigating the worst downsides (being totally unfamiliar with what is currently a "standard" React codebase).

Alternatively we could ask the current cohort. If most of them are planning on getting jobs at big companies it might be more useful to cover current syntax. If most of them want to start their own freelance projects from scratch then new syntax is probably better.

oliverjam commented 5 years ago

I forgot a downside! We have to actually update this workshop to use hooks instead of classes. I don't want to count that though as I'm gonna do it anyway, whether we decide to use it this time or next time 😄

ZooeyMiller commented 5 years ago

I think the downsides of teaching hooks at this point probably outweigh the benefits - learning Classes / this are very useful, and in all likelihood a student getting a job writing React will not be using hooks, so already having an understanding of those things will be super helpful.

React is big and the hard thing about react is mostly "thinking in react" and getting the basic syntax down, and I'm not sure if learning hooks contributes to that? I'd be fine with either happening to be honest, but until more places are using hooks it probably makes sense not to teach them in what is effectively an intro to react.

oliverjam commented 5 years ago

I do honestly believe hooks will help people think-in-React, and the basic syntax becomes much simpler. Classes have always felt like a hacky workaround that don't really represent the pure idea of React well.

What do you think about my idea to teach React concepts with hooks and then touch on classes afterwards? Would that actually be the worst of both worlds and more confusing?

sofiapoh commented 5 years ago

I agree with @ZooeyMiller. Also, one of the reasons we're teaching this week is to get people prepped for real jobs out there and treating the way React is currently as a second class citizen would really hurt peoples ability to do tech tests. Don't get me wrong, I love hooks and I see value in teaching them but we'd definitely put this cohort at disadvantage in terms of getting ready for the "real world".

If we somehow have time I'd be happy for us to mention hooks and maybe do some exercise where we refactor a class component to use hooks?

arrested-developer commented 5 years ago

@oliverjam I really like the look of hooks! I don't disagree with your reasons for wanting to teach them. However, I've got serious reservations about basing a week's teaching on a feature that's in alpha release - as @sofiapoh says, we want (actually, organisationally we need) our students to be ready to get a job, and it seems that being able to write in line with (and more crucially to understand) existing React codebases is the more sensible option.

I like the suggestion of a short hooks workshop, if that fits in, so that students have been exposed to it.

oliverjam commented 5 years ago

Cool, I agree in general. I guess we can do one more cohort learning the "old way" and consider moving over for the next one. I do wonder if it'll ever seem appropriate to make the jump, given how much legacy code is out there.

I'll think about where we could something on hooks in. It's difficult because we'll still need to lose a load of time to class/this

sofiapoh commented 5 years ago

I think as long as the react week will have to patch knowledge of modern FE/ES6 etc we'll have to stick with a lot of basics and non-react specific stuff. IMO it all comes down to the old problem of FAC not really teaching any of the modern webdev practices as part of the curriculum so this week is not so much "Learn React" as it is "Hey There Is a Whole Other Side Of The Stack Beyond Node & It's Cool".

oliverjam commented 5 years ago

Okay React Week is coming back around soonish, so time to revisit this.

Hooks are actually released! By the time React Week rolls around for FAC16 they'll have been out for almost 4 months.

I feel even more strongly now (having used hooks a fair bit) that learning this as the standard way to do stateful components will help beginners "think in React" and grasp the concepts better.

I don't think the benefits change at all, but a couple of the downsides do:

Teaching hooks benefits

Teaching hooks downsides

How does everyone feel about this now? Any suggestions? I've considered maybe asking FAC16 directly in a little survey in Week 12 ("would you rather learn the legacy way that most big codebases currently use, or the new shiny way that will be used going forward)

astroash commented 5 years ago

Not being familiar with older syntax might make getting a job with an existing codebase harder

I think this is a huge downside. Almost all codebases students will encounter as a junior dev will be written with class components and I think not having knowledge of this will greatly impact students ability to get a job straight out of FAC.

IMO we should stick with class components for the next cohort and review again in 4 months.

oliverjam commented 5 years ago

I think I agree. I also don't know how or when this cycle will break. It'll probably take years before hooks are more common than classes 🤷‍♂️

astroash commented 5 years ago

Maybe in 6 months - year it'll probably be more exceptable for people to not know class components as a junior dev. Like how long ago was mixins?

oliverjam commented 5 years ago

Mixins were never supported for class components, which were introduced in 0.13 (March 2015)

I don't think I ever saw a createClass in real code, and I first looked at React in March 2016—so they dropped out of usage within about a year.

I just feel weird about not teaching the most up-to-date idiomatic version of the React API :(

The best solution would probably be to find a way to fit at least some amount of classes in, but then you run into the time issue with the this/classes material you need to cover.

arrested-developer commented 5 years ago

I just feel weird about not teaching the most up-to-date idiomatic version of the React API :(

@oliverjam if it makes you feel better, remember that nothing in the FAC curriculum involves teaching the modern, easier way first 😉

astroash commented 5 years ago

Hehe, I'm with @oliverjam on this one, hooks are a huge improvement for react, and it would be great if we could teach them if time allows.

FACs curriculum is about teaching under the hood understanding, whereas class components are just an outdated api. Weirdly though they have the slightest benefit of being the only OOP we teach.

oliverjam commented 5 years ago

React classes aren't even really a good example of OOP :( there's explicitly no inheritance and they're only there as a mechanism for React to give you access to setState/lifecycles

Hooks are actually closer to true idiomatic/under-the-hood React imo, so it is a bit frustrating. I will try to find a way!

sofiapoh commented 5 years ago

Yeah not the best thread for this. I have a suspicion that part of the senior-confusion about useEffect is actually caused by them having learnt to think the "old" way, which isn't really how hooks work. Maybe we can move to this thread

Continuing here! I guess we'll never know if it's easier to learn hooks without learning classes because we only can make assumptions based on our own experiences! I think the basic usage for most hooks (even useEffect) is simple but there are still some gotchas and edge cases that require some experience to debug.

In defence of classes I'd just like to say that they are still widely used (like I said before) and an actual language feature, not a library specific pattern.

oliverjam commented 5 years ago

an actual language feature

That's fair, although the way React uses classes isn't exactly standard. Other than the class-creation syntax it's not really the way you'd use classes in typical vanilla OO JS

I spent a bit of time teaching React to my gf from scratch last weekend, and hooks seemed to make the process pretty smooth. There's a nice progression from "stateless function component" to "hardcode a variable and render it" to "change that variable to a useState call". The current flow is really jolting as you have to go from function components (that you just saw for the first time) straight to classes when you want to add some state. Means there's a ton more to learn.

The framing is quite important though: React components keep the DOM in sync with your state and effects keep side-effects in sync with your state.

I agree that there are some gotchas around hooks, but imo they are mostly gotchas because they invert the assumptions you have from classes. E.g. useEffect fires on every update by default, so it's easy to accidentally send a billion fetch requests. In a class you mostly have the opposite problem—it's easy to make a component that doesn't refetch when it updates.

If you've never used classes you hopefully won't have some of those assumptions.

sofiapoh commented 5 years ago

I don't disagree that not teaching classes is much easier, it definitely is. I totally agree as well that jumping between classes and function components is a massive context switch and can be straining as often learning new stuff is. I'm mostly worried of hurting peoples chances of getting employed afterwards if we take away something that teaches a key part of how most codebases still look for the sake of ergonomics.

oliverjam commented 5 years ago

I'm reasonably sure that FAC students could pick classes up pretty quickly once they have the basics down. I'm also not opposed to keeping a workshop or two using classes so we at least expose them to it.

Would you be less likely to hire someone who knew how to use hooks but hadn't used classes much (or at all?). Genuine question, because I'm not sure.

At TM at least we don't have that many classes (because Redux), and we take on interns without any Redux experience all the time.

sofiapoh commented 5 years ago

Would you be less likely to hire someone who knew how to use hooks but hadn't used classes much (or at all?). Genuine question, because I'm not sure.

If we hired a junior they wouldn't necessarily need to know React as long as they had a solid enough grasp of Javascript. I think a lot will and should be taught on the job. Not all companies are like this though so we'd want to give everyone coming from F&C the best chance of getting a job they want regardless of if they use classes or not.

oliverjam commented 5 years ago

So I started writing a new intro to React workshop in a new repo:

https://github.com/oliverjam/learn-react/

It's much shorter, more practical/focused and has less to read. It also uses hooks right now 🙊

In my head the ideal structure is:

  1. Elements (intro to JSX)
  2. Components (intro to function components & props)
  3. State (intro to useState, syncing DOM/UI with state)
  4. Effects (intro to useEffect, syncing side-effects with props/state)

and then cover classes/lifecycles later on (maybe on the Tuesday afternoon) as a kind of "stuff you still need to know" thing.

If we decide we absolutely shouldn't teach hooks then I guess we put the old classes bit in there in place of State/Effects