Project: Memory Card: Instruct learners to use useEffect explicitly
royalh23 opened this issue · comments
Checks
- This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
- I have thoroughly read and understand The Odin Project Contributing Guide
- Would you like to work on this issue?
Describe your suggestion
I've seen some learners fetch data from an API on a button click, instead of inside a useEffect hook. While it's a perfectly valid way of doing things, doing so deprives learners of the opportunity to practice useEffect.
I'm aware that it's fairly obvious that learners are expected to fetch data inside useEffect; however, for some reason, some people find useEffect kind of difficult and resort for not using it in the project. Including a sentence along the lines of "You're expected to use useEffect for fetching data" would be much better.
Path
Node / JS
Lesson Url
https://www.theodinproject.com/lessons/node-path-react-new-memory-card
(Optional) Discord Name
No response
(Optional) Additional Comments
No response
@TheOdinProject/javascript Can someone take a look please.
however, for some reason, some people find useEffect kind of difficult
@royalh23 have you noticed any trend in reasoning for this, or has it more been that people express difficulty without reason expanding on what that difficulty is?
Explicitly mentioning that a useEffect needs to be used may be a good idea here regardless. The lesson on effects doesn't exactly go into useEffect with fetching data too in depth from a quick glance (there's a very short sentence or two that quickly mentions "external systems like an API", but beyond that I don't believe there's anything), so it may not be super apparent that's the expectation here.
I am wondering if we should update the effects lesson to go into more detail about other times to use the useEffect hook, but as far as this issue goes adding some verbiage to the project may be good. I'd like to hear your response to my above question first before assigning, though.
Fetching in react, including with useEffect is gone into much more detail in a later "Fetching Data in React" lesson.
I can't remember the exact reason, but I remember reading that the decision to require a basic fetching in Memory Card before the proper Fetching lesson was intentional. Perhaps because fetching is not anything special and doesn't actually have to be done in an effect in order to work, and the fetching lesson just expands on React-specific stuff.
Perhaps @01zulfi might have more insight into this.
If it's intentional then maybe this is fine. If we wanted to make a change (not necessarily saying we would have to) we could add a note in this project about covering fetching data in React in more detail later, or update the fetching lesson to call back to this project (You may have done XYZ back in the [Memory Card project](...) or something).
I don't exactly remember at the top of my head, but I do think we might've kept on how to fetch in memory card project purposefully vague. I wanted learners to decide on their app's behaviour and built their React components around them. Let's say they want to load data on a user event i.e. button click then they wouldn't need an effect. But if they want to load data on page load, then they'll need an effect. Similarly, will data be fetched on every user selection, or is it a one time thing? I want the learners to come up with their solutions as they see fit. Adding in a "you might need useEffect" will force learners to use effect (lol) even if they could've done without it.
Additionally, the requirement for fetching from external api in memory card project is intentional even if the course doesn't formally guide the learners. I want them to Google/research their way into completing the project, and then come across the fetching data lesson with a understanding of the problem.
^ That all sounds good to me. Especially for this point in the curriculum (didn't realize exactly where React course was placed at first 😆 ), providing less explicit instruction makes sense to help users figure things out themselves/do things their own way.
@royalh23 have you noticed any trend in reasoning for this, or has it more been that people express difficulty without reason expanding on what that difficulty is?
@thatblindgeye I've seen some people ask if it's okay not to use effects in the project since they can basically fetch data inside an event handler.
@01zulfi @MaoShizhong I mean if learners don't use effects in the project, how will they get the chance to practice useEffect? They might be using effects in the upcoming projects but Memory Card feels like a sweet spot because it comes right after introducing effects.
I think I'll defer to @01zulfi first, given he was more directly involved with the React course's intentions and direction. Would greatly value his opinion here.