If you are a react newbie then this article is for you. I have listed some of the most often made mistakes which a beginner makes. Let's straight dive into it!
1. Using VanillaJS in React
Using VanillaJS in your react code is imperative way and which conflicts with nature of react. As we already know that react is declarative and using vanillaJS in it makes it imperative.
Note that the code will still work but it is considered as bad practice and you should avoid since you are a beginner.
Let's take an example to understand it better:
document.getElementById(”input”) ❌
The equivalent of the document.querySelector() method in React is using refs. To select an element, set the ref prop on it to the return value of calling the useRef() hook and access the dom element using the current property on the ref, e.g. ref.current. ✅
2. Think declarative not imperative!
Imperative programming: telling the "machine" how to do something, and as a result what you want to happen will happen.
Declarative programming: telling the "machine"1 what you would like to happen, and let the computer figure out how to do it.
I’ll start with the imperative example:
const changeBgColorBtn = document.querySelector("#change-bg-btn");
const text = document.querySelector(".text");
const changeColorHandler = () => {
console.log("clicked");
text.style.backgroundColor = "blue";
};
changeBgColorBtn.addEventListener("click", changeColorHandler);
And our declarative React example:
import { useState } from "react";
import "./styles.css";
export default function App() {
const [bgColor, setBgColor] = useState("red");
const changeColorHandler = () => {
setBgColor("blue");
if (bgColor === "blue") {
setBgColor("red");
}
};
return (
<div className="App">
<button onClick={changeColorHandler}>Change color</button>
<div style={{ backgroundColor: bgColor }}>Lorem epsum</div>
</div>
);
}
The React example never actually touches an element. it simply declares an element should be rendered given our current state. It does not actually manipulate the DOM itself.
Reaching for direct DOM manipulation is a mistake I felt myself making often when I first started working with React.
👉 Baby steps below to follow as a beginner:
Visualize the flow by drawing it
Convert it to Html + CSS first
Identify which piece is changing
Put that piece as a JSX variable and see if it works or not
3. Using too many states
If something can be derived from the state, you don’t need to put that in a state variable
4. Isolating the problem area
Many a times the problem is you not knowing HTML or CSS correct property. Doing step 1 would help isolate that problem. Then you can just search the syntax online for example “How to do strikethrough in css”?
5. Using impure ways to update objects and arrays
❌ For example, using .push() method
[obj.property](http://obj.property)= x✅ Instead, you can use .concat()
{…obj, property = x}
WHY?
State update should be done with new reference for React to render the change.
6. Not realising that setState is async
import { useState } from "react";
import "./styles.css";
export default function App() {
const [counter, setCounter] = useState(0);
const clickHandler = () => {
setCounter(counter + 1);
console.log(counter); // output 0 and not 1, YES!
};
return (
<div className="App">
<button onClick={clickHandler}>Click me</button>
<div>{counter}</div>
</div>
);
}
The state value updates are batched together and can be observed only in next pass i.e not immediately. So here when we console in clickHandler function, it will console the previous value and not updated value i.e 0 and not 1.
Thanks for reading!
And that's it for today's article. Thank you so much for reading, if you learned something new from this, consider liking and sharing it with others.
And finally as always, if you have any questions or feedback let me know in the comments down below and follow me on Twitter for more updates on my journey, tips and tricks about programming. Ciao 👋