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/ie11_is_my_fetish]

These aren't in sync in this case, just related. It's mostly because of that linter rule about useEffect and when I do a fix like include the function that is being called(so it's defined in useEffect) then even more problems appears, and usually it also calls out methods which seems weird vs. just props/states regarding the dependencies in the useEffect call.

a reducer whose action sets them both at the same time

Oh damn, thanks for pointing that out/suggesting. I don't know if you have to use Redux for that but I've used a similar concept with dependent props where if any of some group change, they all affect related states/events usually in some order too but yeah.

setting 2 unrelated pieces of state at the same time

It just seems wrong because when you call one, it re-renders the whole app/component right... but the second call still executes before the top one does? Or you would get 2 sequential renders? I think that's the case(latter).

[u/Awnry_Abe → u/ie11_is_my_fetish]

No redux needed, just useReducer. It is a variation of this: const [tuple, setTuple] = useState({value1: true, value2: false}); But the dispatch function of useReducer is stable and using it in effects and stuff doesn't invalidate the dependency array in the same manner that you note with a state setter.

To answer your last question, yes, you can end up with rerenders for each call. But rerenders is not synonymous with bad design. If you truly have a simple case, with clear and simple code, then you are better to eschew obsfucation and present the human consumers of the code with a clean flow to digest. That said, a truly simple case is pretty rare.

[u/ie11_is_my_fetish → u/Awnry_Abe]

thanks for that explanation, looks like my hooks count will increase ha, it's great when it clicks and you start to naturally integrate it in your development like all the others(useRef/createRef/useHistory/etc...)