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

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!

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!

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 ✨

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

these videos are awesome man!

This is pure gold! Keep going!!

Awesome refactor, keep doing these!

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

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.

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!

nice tips with BEM, not heard of that before

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

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

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

Good job bub!

god refactor bro!

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.

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

thank you

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

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

1:08 Tsah-tsee-kee

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

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

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?

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?

Can you share the repo? I want to follow along with you

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

can you use .then and async/await in the same function? i thought it was one or the other, not both

nice

at 13:59, the dependency array could've just been "categories", not "fetchCategories"?

what is he talking about with useCallback does anyone have reference doc or youtube that shows the problem?

Just put the fetchCategories inside the useEffect itself, as it's only used inside that effect, this way you won't have a problem with useCallback and dependency hell, also you broke the logic with that refactor lol=) it will now unexpectedly fire the effect once again if an error happens.

can i send you my project in react?

BEM is not pronounced as BIM lol sorry couldn't help myself, love the content!

how can i send you my project to refactor?

8:00-8:47 code spliting the axios call its just to make it look nicer, it wont matter on the actual network tab, you can see every URL used in the project, all tokens, every payload too, if you are using a token or apikey, it will be shown to everyone who is using that page, the only way to hide it is serverside. even using environment variables wont hide any API keys, if its being used as an axios call in the frontend. unless you just meant to hide it from view in the code inside the project.

55:43 I don’t know why he uses Fragments when he has a div as a direct child

I'm sorry but I had to stop watching after seeing you answer those trivia questions. What rock do you live under where you've never heard of Tandoori chicken lmaooo

use .finally instead of calling setIsLoading in both .then and .catch