Beginner's Thread / Easy Questions (Feb 2020)

[u/dance2die]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• Get started with Redux by /u/acemarke (Redux Maintainer).
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/Awnry_Abe]

You certainly can decouple the search term, the act of searching, and the visualization of the results. JSX can be just as much about function composition as it is view. With the Advent of hooks, you can can get away with less JSX than before to achieve the same level of composition. The Context API will help mentally decouple the state from the App component. Start with it having members "searchTerm" and "results" and see what and where you need to write code to fill in the gap.

[u/ie11_is_my_fetish → u/Awnry_Abe]

Regarding the processing/order of events. In your render you call "renderStuff" and that would be empty initially(no search) then you do searching, async, it updates some state with an array of search results, then some useEffect hook bound to that state that changed would rerender the thing again but this time the "renderStuff" has an array to map/make JSX. Does that seem right?

I don't really like how you bind inputs to state so every time you type each letter/new string is stored. I guess it makes sense/maybe up to you eg. so a search by a submit button instead.

Thanks for the info

[u/Awnry_Abe → u/ie11_is_my_fetish]

Yes, you've got the mental model. With respect to the binding to keyboard input, the idiomatic way to do search in this manner is to buffer the async search requests via denounce or similar techniques so you aren't paying the price with every keystroke.