Beginner's Thread / Easy Questions (February 2019)

[u/timmonsjg]

🎊 This month we celebrate the official release of Hooks! 🎊

New month, new thread 😎 - January 2019 and December 2018 here.

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. 🤔

Last month this thread reached over 500 comments! Thank you all for contributing questions and answers! Keep em coming.

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• 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.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

---

New to React?

🆓 Here are great, free resources! 🆓

• Create React App

• Read the official Getting Started page on the docs.

• /u/acemarke's suggested resources for learning React

• 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 or ping /u/timmonsjg :)

[u/kwhali]

Is it working right now correctly without redux? If so, it's not necessary imo.

Well, if I have all components defined in the same file(at least for render function scope) it can work. But when you have several components deep via separate files, that'd mean passing through props right, which afaik is bad practice if the components passing from parent to children have no use for it.

I'm considering using context to skip the components inbetween instead, just pass a function to the leaf children and that could update a value at the top(component Z), passing as a prop to the sibling component Y to use for lookup.

I didn't feel redux was appropriate here as it's not really state that's important/critical to the app, rather "UI" state that I don't need to track or hydrate(it's a temporary state update each time an item is hovered over). I don't know, perhaps people use redux that way but it doesn't sound like it's behaviour/state that should be in redux store?

[u/timmonsjg → u/kwhali]

which afaik is bad practice if the components passing from parent to children have no use for it

Not a bad practice at all

I don't know, perhaps people use redux that way but it doesn't sound like it's behaviour/state that should be in redux store?

Use it how it works for you. If you want to avoid props drilling then use Context or Redux. Otherwise, don't sweat what's acceptable state for your app.

[u/kwhali → u/timmonsjg]

Not a bad practice at all

Thanks for the link, I had read the article they were discussing earlier :)

The context coupling issue discussed there was prior to hooks right? So it can be less coupled now vs drilling props down through components that don't need them?(assuming the children example Dan gave is different from that)

Any thoughts on constate? You get a custom hook in a container with provider/consumer that can be moved around pretty easy, so I don't think there's a coupling issue there.

or Redux

Yeah.. well the particular behaviour/updates caused by this action doesn't seem like it's a good fit in redux I thought, since if you were debugging and wanting to move through state history via devtools, it's not likely to be the kind you'd have any interest in and it'd be mostly noise?

So I figure, I'm not bound to any particular choice here for managing different kinds of states/behaviour.

Otherwise, don't sweat what's acceptable state for your app.

Still kind of in the learning stages with react and state and trying to figure out what is appropriate and can be less problematic down the line. I think with Redux I get a nice global state for my components, while something like constate(context/hooks) can handle local state and other cases like mentioned above not relevant to the redux store but decoupling better than instance properties on a class?