Find me on medium!
Edit: Point #2 of this post has been revised to be more understandable (and creepier) in a reader’s perspective. Thank you to t...
For further actions, you may consider blocking this person and/or reporting abuse
Another point to add is that using a type checker like Flow or TypeScript is super helpful in catching some of these bugs for you!
Yea almost all of the points made in the article would be pointed out to you by the compiler if you were using TypeScript. Excellent article though! It just confirmed my bias towards type safety.
type errors never happen when process is correct, but types add a ton of overhead and slow down the team, and don't forget type correctness !== program correctness.
Can you explain why types add overhead? And which type of overhead— speed? Quality? Value?
This is nice, I do fall for some of those sometimes, using quick shortcuts. This is a good reminder to avoid that :)
About #1 though, it's good to filter the app from
nulls. I parse the server responses and anything that libraries might return and check for nulls. Typescript also helps!Nice article! Points 3 and 4 is interesting because it's a very commonly used pattern. What solutions would you suggest implement aside from unit tests?
From my experience, I think most of the problems in this article will be easy to solve, if you use Typescript.
This.
As others have mentioned, this post is a great example of why TypeScript or another type checker vastly improve your code reliabilty as it would have solved the first six issues.
The last two are about validating user input which is always a good idea. With the particular example given in number 7 (the first one), values passed in the querystring should be URL encoded first and foremost which would solve the problem with the '/'. Additional validation to restrict the characters could then be done with a Regex but always with appropriate server-side validation also in place.
This is a Javascript thingie, not React specific.
Edit: As far as I can see none of those issues listed have nothing to do with React API, all of these are just Javascript gotchas, and you can have the same issues in the Vue, Angular, [nameYourFrameworkHere] projects.
By using type checker helper like Flow or Typescript you can get rid of the half problems listed here, if you don't want to do that, guard your logic for unforeseen situations and name your variables correctly, so that you know what is an array and what is an object.
I'm sorry but none of these are related to react practices, this is just JS in general, and that example with an API returning undefined is pure facepalm, I cannot even realistically imagine something like that.
Your posts are always so informative. I'm getting better at coding.
I am glad I can help!
Almost all of these problems are completely eliminated by using Typescript.
This would make a great article if the title was: How Typescript saved the front-end world!
nice article!
regarding accessing deeply nested object properties, i prefer lodash get. lodash.com/docs/4.17.11#get
You most definitely don't want to do this. You're only eliminating the crash without fixing the bug.