5 common mistakes when writing React components

Tram Ho

These are not errors that must be fixed, at first glance you will not know if it is wrong, nor affect performance or anything. However, each person will have different opinions on a problem, some will force it to fix it, others think it is not necessary, I hope you will add your point of view.

Use useState when not absolutely necessary

  • Sometimes we use useState in unnecessary situations, putting values ​​in the state doesn’t really affect component updates.
  • For example, in we have 2 buttons: Counter and Submit, the counter button increases the count value, the submit button will send the count value to the API. Note that there is no display of the count value on the interface

  • In general, this code will not have any errors, just if you notice you will see when the state changes, the component re-renders, but obviously the re-render will not change, because we do not display the price. count count to interface

✅ The recommended approach is as follows

Here we use useRef, the value of useRef, even if changed, does not affect the re-render.

Use router.push instead of link

  • For example if we want to navigate to a certain page when user click ❌

  • The problem is that if you do this, then when the user can open a new tab ?, screen readers will not understand it as a link (accessibility is not good).

✅ The recommended approach is as follows

Handle action with useEffect

useEffect is one of react’s best, and most paper-consuming, hooks. Although it is also useful, but get tired of it at times.

Let’s say a component fetches a list of data, then renders it

  • Here we set up two useEffect hooks, the first one to load data for the first time, the second one to call onSuccess when there is a change in data.
  • The problem is that it loses a one-to-one relationship between the action and the function to be called. To put it more easily, onSuccess is not guaranteed to be called only when getting the data successfully, somewhere in the code you can still have other ways to call onSuccess.

✅ The recommended approach is as follows

Each component has a task

  • Compose many components say they are difficult, difficult in that when split is reasonable. For example the header will appear a burger button on mobile and tab on the desktop❌

  • The problem here is with the isMobile logic, do we really need to separate the HeaderInner?

✅ The recommended approach is as follows

Only one job is done in useEffect

  • If not careful using useEffect is like a nightmare with componentWillReceivedProps and componentDidUpdate for a while. Imagine we have a component that fetches data from the backend, showing breadcrumbs depending on the current location ❌

  • We are running 2 different effects: 1 fetch the data, 2 is the breadcrumb update on the location value (if there is any change). Obviously sometimes the location has real changes, but we don’t need the fetchData to run
  • So separating each effect only does one thing.

✅ The recommended approach is as follows

  • Do not know if we still have any cases, you can share more.
Share the news now

Source : Viblo