Search for a command to run...
What's up!? 🤙 We're two developers who love to share their knowledge! You will find here awesome stuff about programming and tech stuff. Feel free to contact us if you got any questions!
Check out our website https://codingbrah.com
Thanks for reading! I really appreciate it! 😊
Hahaha, I like the quote from John Wood 😄. For the controlled and uncontrolled section, what if you mix with JS DOM API? Is that wrong?
Lol, PropTypes only make the code more verbose, better to use TypeScript.
Haha, this is probably my favorite quote 😂
Regarding controlled and uncontrolled components it's really hard to say what is "bad" or "right". It depends on the specific case, but in most ones in my opinion is better to use the controlled components in order to achieve this "single source of truth” I've mentioned in the post (in short data will be controlled by the state and it will be always in sync with input element). I recommend checking this article, which is also mentioned in React docs -> https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/.
And yeah, I agree with you! It's better to use TypeScript. Moreover, I think in the future it might become a standard in Web Development, so it's worth to learn it 🤓
#IntroToCrypto
Which to use and when? 🧐
What is a Service Worker? 🤔 Service Worker is just a fancy Web Worker. The difference is, it’s actually placed between your application and the third party services. You can consider it as a kind of middleware function that can parse all requests an...
5 Tips On How To Improve Accessibility On Your Website What's up, everyone!? 🤙 I haven't posted for a while, but... I'm back! 🤟 Today I'm going to give you 5 tips on how to easily improve accessibility on your website! 🤓 #1 Use semantic HTML tags ...
Recently, I'm not that active here, but this is due to a lot of work that I have 🤓 I'm working on a couple of projects on which I will share more in near future (one of the projects is a game build with React Native - siiiick! 🤯).
Ok, let's get back to the topic! 5 React good practices! 🔥
I think we all have been at least once in a project that is a total mess when it comes to its file and folder structure. This uncontrolled mess can be changed by keeping your components small and dividing them by a logic/function that they handle. A single component should render just a specific element of your page or handle particular behavior. This approach will help you in keeping your code fresh and clean!
Also, it will help in better maintaining your tests, so it’ll be easier to catch a bug and most importantly it will help you and your co-workers to understand easier the code you wrote (especially when you go back to it after some long period 😜 ). As John Wood once said:
One of the popular principles out there is DRY. It is recommended to use everywhere, like literally everywhere. Even if you ask your neighbor Steven, he’ll also recommend it to you. If you’re not familiar with DRY, then let me quickly explain it. As you have already seen in the title DRY means Don’t Repeat Yourself. Simply said it’s a principle that encourages us to create reusable functions, so they’ll be not repeated within our code. The opposite of the DRY principle is WET (Write Everything Twice or also known as Waste Everyone’s Time). It is usually trashed, by others, because it encourages you to write duplicated code.
Also, some time ago Kent C. Dodds presented a new “principal” (it’s more like philosophy) called AHA (Avoid Hasty Abstractions). This “principle” states that “you shouldn’t be dogmatic about when you start writing abstractions but instead write the abstraction when it feels right and don’t be afraid to duplicate code until you get there”. I think it’s worth checking it out. Link below: https://kentcdodds.com/blog/aha-programming
I’m going to start with a quick explanation, as maybe some of you are wondering now "what the hell are controlled and uncontrolled components? 🤔" Ok, so both are used only in a form element, and being more specific they are used in the input, textarea, and select elements. Controlled components are the ones that value is maintained by React’s local state, so in this case, we’re achieving a “single source of truth”. On the other hand, uncontrolled components are components that DOM uses itself to handle data from a form. Both solutions give you the possibility to have one-time value retrieval and validation on submit. However, only controlled components are the ones that should be used in the case when you need instant field validation, conditionally disabling the submit button, enforcing specific input format, or for example creating dynamic inputs. The only case where usage of uncontrolled components is a must is an input element with a “file” type. In this element, the value can be only set by a user, and not programmatically.
You’ve got an error and don’t know where it comes from? I think that’s a good reason to start writing tests for your components 😜 .
Well written tests are not only preventing you from having bugs but also improves the quality of the code. Moreover, it will provide you documentation as you will have every functionality of the method described. Also, it will simplify the debugging process as if a test fails, then only the latest changes made in the code will need to be debugged. I can keep writing more and more advantages of writing tests, but this is not the case here. Just remember to not be lazy and start writing those tests! 😜
Type checking alongside tests is very useful to keep your code out of bugs 🐛 . It is used to make sure that data you receive is valid (ex. method that should take as an argument a string value, didn’t receive an object instead). Also, using type checkers you create some kind of documentation for you as you’re defining what type of data the function takes as input and what type of data it returns as output. That helps later on for example when doing refactoring or just to help other co-workers to understand your code better! For type checking, you can use PropTypes, which is a small library for checking React props and similar objects, but if you want to go total badass 🤟, you can use TypeScript, which is an open-source programming language.
I will do a separate article on those two, but the difference that you should know for now is that PropTypes is type checking at runtime and Typescript validate the types at the time of compilation.
That's it for today! 🤓 Feel free to drop a comment or like if you found this post useful! 😊 Also, let me know if you would add something else to this list! 🤙
