This is how I write cleaner react code - live refactoring a subscribers react project

Just refactoring some code, this one was pretty fun to clean up.

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

[marcbaring]

Appreciate this so much! Thanks for refactoring my messy react code haha! Feels good to learn while seeing your code getting refactored! As a beginner, I love how you explain every single line of code while being so chill. I guess refactoring my project was really a good way for you to make a video teaching about good code practices and how to write cleaner code. Definitely applying these new practices for my next project!

[pesterenan]

These videos are so valuable. There is so much small errors that get compounded and we don't even stop to see if it can be improved. Nice one!

[__dev]

Subscribed a few weeks ago and I really enjoy your videos. Your vibe is super chill and cozy. I also appreciate how open you are about the things you don’t know and have to improve, but that’s okay because that’s what a dev’s life is about. Happy coding ✨

[TheRcfrias]

Cool, it really helps to re-think what could be better and identify bad practices. I think a big limbo is understanding every time when to use what outside or inside the main function definition

[dosss_]

12:33 recreating the function (i.e. without useCallback) is fine here, as it’s almost negligible cost

useCallback is useful for when you’re passing a function as a prop, and you don’t want its reference to change and cause a rerender

[lipun_panda]

I think around 17:21 you were thinking about useEffect running on every rerender and calling fetch categories multiple times but when you pass an empty dependency array, the useEffect behaves like componentDidMount and runs only once.

The reason behind this is useEffect runs when anything in the dependency array changes and since the dependency array is empty, nothing is changing so it runs only once.

Now if you had a state called category and whenever that state updates i.e., the category changes you would want to rerun the useEffect to fetch questions regarding that category. In that case you’d put category in the dependency array.

[rujor]

The more React videos I see, the happier I am to have chosen Angular all those years ago 😄.. But great stuff 👍!

[hombacom]

Great walkthrough. I would have category structure as a list of ID/name somewhere (no custom logic that depends on language), and result text as a state that seems to not be multiple things at once.

[gabrielalcantarabernardes]

on 25:45 I prefer to setIsLoading(false) on finally rather than each step

[adarsh-chakraborty]

Damn, I have a similar project but it's messed up. I think i should start using react custom hooks now!!

[SamOween]

15:05

I really liked the way that we used a hook to seperate the concerns of data fetching and displaying that data.

Would it be overkill to have a container component that uses the useCategories hook which then passes the results as props into a dumb/presentational component to make it easier to perform component tests? That way, it would be a lot easier to mock and falls in line with Test-Driven Development principles. This has been the way I have found best so far.

What do you think? @WebDevCody

[TheAditya]

Why people don't use elements like header, main, section, article ? Why just div, div div ? Semantic HTML is a thing guys....

[kmpman]

Didnt expect to learn about bem, most videos I watch use tailwind, bootstrap and so on but I love to make my own css. I'll definitely start using bem!

[stercorarius]

nice tips with BEM, not heard of that before

[John-Dennehy]

Line 16-17 of Categories.js you use setError(error) instead of setError(err)

[KyleKatarn]

When you abstract the axios functions out to another class, would it be better practice to further abstract the axios call into its own helper function with the link as an input so that you can maybe change out say if you wanted to swap from axios into fetch in the future so that all your derived helper functions are only calling from one method instead of having to change up the axios call method in all of your other getContent functions?

[coldym]

I would lift state up in 36:47 to remove useEffect from SettingsCard

[guacamole]

21:38 /api/ can also be added to the BASE_URL string

[carnath]

Hey Cody, thanks for the refactoring video. Any chance you'd be willing to go over some of the shortcuts you're using on vscode?

[slackergeek]

Tzatziki is so good. Just use some pita bread to scoop it up. Try it one day.