While working on a React App, following these coding conventions will give you a better development experience
VS Code is Highly Recommen...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Great article Hafiz. I noticed one little doubtful practice regarding the nested ternaries. Some linters actually don't suggest this method due its lack of readability.
Non-compliant code
Compliant Solution
Read more at rules.sonarsource.com/javascript/R...
Good article for those new to React. I disagree with the ternary point (like many others). Ternary is great when checking only 1 condition where the outcome is say
const saving = userIsEmployee ? 50 : 10
.With multiple conditions or more than one the ternary can become unreadable and an if else would be more appropriate. Or my preferred method would be a switch case.
Depending on the number of options , or condition could potentially even utilise a object literal lookup.
I do find ternary operators with more than one conditions unreadable.
This is how I would have written it
Agreed
Great tips!
Btw, if you are using Typescript or support modern browser, you can use optional chaining.
Here is what that would look like:
Otherwise, it would error out.
Great Stuff!!
If anyone want's to follow each other on github here's my handle
github.com/dangolbeeker
Followed. Please follow back to mine: github.com/its-monotype
Follwed. Here's mine github.com/AmoabaKelvin
Followed back!
Followed. Please follow back to mine:
github.com/scoobytux
Great article. I'm always happy when people write about best practices, even if I disagree with some. The inline css for example i actually prefer it because it keeps me from having to go to another file if im changing the appearance of something. There are great libraries out there that help to keep the css in js more clean, like mui/emotion for example.
Thanks for the article, but, i didn't understand this: "In a function, if you are assigning a value to a state variable then you won't be able to access that assigned value even after it has been assigned in that function". Could you explain?
In React the useState hook is asynchronous, so if you try to access the state just after it has changed in a direct way, you don't have any guarantee this will show you the actual value or the previous value. It you need to access the new value, it is a good idea to use a new value (let's say newValue), then change the state using the setMessage (using the same hook as the example) and than calling the newValue to console, for instance.
I believe you would need to place the console.log inside the useEffect hook and include the state variable inside the useEffect's dependency array. Like Hafiz said state change in React is asynchronous, so the useEffect would be able to display the new state after the component renders.
Because state change in React is asynchronous so we can't get modified state immediately.
Definitely bookmarking this for future reference!
That said, the ternary operator over if/else I would recommend the opposite. Nesting ternary operations/statements should generally be avoided for readability reasons. The operator certainly has it's uses, but I personally feel like that's not one of them.
(just my 2₵, FWIW)
Sure. ternary operator should be used whenever it is needed. For more complex conditions or multiline code to be executed after some condition, we should use if/else in this case.
One of the best article that I came across. thank you.
Happy to see that I follow almost all of them, except I usually use inline styles due to the use Tailwind CSS. Great Article!!
You will get TypeError: cannot Read properties of undefined reading 'length' and cannot Read properties of undefined reading name in all 6 cases.
You have to do: oddNumbers?.length with question mark.
Same with: person?.name.
Thank you for sharing 🙌
It would be highly appreciated if you could write an article about react-redux as well.
@_haris_shah sure
You should add one more question mark, like:
console.log(oddNumbers❓.length ?? "Array is undefined");
I suggest to use TypeScript instead, in vscode with type checking, it's virtually impossible to make similar mistakes.
Hi Hafiz, FYI we've added your blog post on a GitHub project gathering content about best coding practices :)
github.com/promyze/best-coding-pra...
Would very much recommend adding typescript to this list. React support for it is great and it prevents a lot of beginner level bugs.
hi Hafiz thank you for sharing .
there is just one thing , i think ternary operator is not good for every condition statement. correct me if i'm incorrect
Try to use it whenever possible instead of if/else statements because ternary operator makes the code shorter
Yes it make the code shorter, but it become hard to read if we use lots of nested ternary operations
Also i have seen some developers using ternary operations for calling a function or doing an action, as a best practice I suggest to use ternary only for returning a value or assigning to a variable.
Eg.
return name === "Ali" ? 1 : (name === "Bilal" ? 2 : 3);
const value = name === "Ali" ? 1 : (name === "Bilal" ? 2 : 3);
Thanks for the article.
Nice tips for to remember ☺️
I have not read of this but quick thing I find wrong is:
These tips are very helpful for a beginner like me, definitely bookmarking this. Thanks!
Thanks for sharing
It is good for reference.
Thank you so much 🥰🥰
why are you giving "recommendations" but not saying the reason why?
This is valuable, thanks a lot 👍💯✨
Thank you for sharing, amazing article
great article
Thanks for this Informative article
thanks Hafiz, not you joining dev yesterday and making a banger post same day!
great content and I learned a lot reading it.
I hope to see more of it.
Cool!
Well explain @iambilalriaz ✍🏻
Thanks
If you are nesting multiple if statements/ternaries, its probably best to just refactor. but i would prefer if /else if /else, or switch, over nested ternaries any day
Thanks, it's helpful!