DEV Community

Adaptive Shield Matrix
Adaptive Shield Matrix

Posted on • Updated on

React Basics: Essential Knowledge for Every React Developer

#react #webdev #javascript #typescript

This post is meant to cover essential information that every react developer should know or be aware of.

Another article name could be "Most common problems encountered in React"

Why is this important?

  • Since React is not really a framework and only a view library it does not offer an all-in-one solution to most web development needs and relies on its ecosystem to round out its rough edges.

Most common problems in react frontend development are

  • Typescript usage with React
  • When and how to use core APIs and Hooks
  • State Management

Because not knowing the basics (especially for beginners) leads to countless repeat of mistakes, confusion, suffering
and complaining loudly on the internet about how frontend development in general and react in particular sucks (even if it is not true).

Basics / Fundation

You don't require any paid courses for react frontend development if your read through and have a strong grasp of the following resources

Tsconfig

Enable strict typescript compiler settings

  • The strict is most important
  • Other entries after that are optional
  • I disabled noUnusedLocals and noUnusedParameters in my projects because It more often gets in the way than helps (especially if you refactor code more often) 
// tsconfig.json
{
  "compilerOptions": {
  // code quality settings
  "strict": true,
  "noUncheckedIndexedAccess": true,
  "noUnusedLocals": false,
  "noUnusedParameters": false,
  "noImplicitAny": true,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "forceConsistentCasingInFileNames": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Read about the individual fields here
https://www.totaltypescript.com/tsconfig-cheat-sheet

React core APIs to avoid

Hooks that should only be used in library code (if your write public or internal ones) and avoided in web app code

  • useContext
  • useRef
  • useId

Try to avoid and use only rarely / then necessary

Avoid and do not use following hooks

  • use, useState, useContext -> Replaced by custom methods provided by the state management library
  • useMemo, useCallback, cache -> The most common premature optimization addressing re-render issues, which are unnecessary and can be skipped completely if using a proper state management library

React State Management

React build-in core libraries offer only primitives like useState and useContext to manage state.
React evolved over the years and relies heavily on its community to cover its weaknesses, particularly in the realm of state management.

Why are the build-in hooks useState and useContext not good enough?

  • They are ment to be primitives, meant to be extended
  • They work only good enough in a single isolated component
  • Are are inadequate to pass and share state across multiple components
  • All above incentivises you to write very big components (-> that are hard to read), since passing state between components causes uneccesary re-renders and bad performance

Why are the build-in hooks useState and useContext not good enough to share state between components?

  • Using useState
    • Causes you to pass down state from parent components to child component by props
    • Having to pass down additional functions to change said state (from parents to child components)
    • If a child component calls a state mutation function (passed from a parent) -> the parent and all of its child have to re-render -> performance problems
  • Using useContext
    • You will have a high amount of wrapped <A..Provider><B..Provider</B..Provider></A..Provider> Context Providers that makes it hard to read and follow thats going on
    • Modifing state of a single context providers -> forces a reload of all components using this context
  • Both useState and useContext cause unnecessary re-render that are hard to track down

Here are this and more react problems mentioned in more detail if you want to read futher

What is the best way to manage state in React?

The industry-accepted solution to re-render problems is a signal based state manager.
Learning from Reacts quirks (and mistakes) newer frameworks like Solid.js and Svelte have incorporated signal based state management into their core libraries.

As of now, React doesn't come equipped with a built-in signal based state manager.
Consequently, a significant number of new React developers, myself included (then I started), encounter the problems stemming from the issues mentioned above.

How to do state in react the right way

  • Use Query/Search URL parameters for saving and loading web app state.
    • This should be the first and default choice
    • Simplifying sharing with others and troubleshooting problems yourself
  • Combine state with data fetching with react-query
    • This should be the second choice since you have to fetch data anyway
    • Skip this option if you are using trpc or prefer not to use react-query
  • Using a signal based state manager
    • Allows updating only the parts that change, called atomic updates
    • jotai Is the signal based state manager I recommended, offering the best developer experience (in my opinion) as it eliminates the necessity to define and update a global store
    • Or use one of the other signal based state manager libraries: Zustand, Valtio, React-Redux, Recoil, etc

Here is a more detailed comparison of react state manager libraries

Futher reading

Checkout the following link about the React ecosystem for routing, form handling, UI component, animation libraries and more

Top comments (0)

Read next

fibonacid profile image

OAuth2 and AWS Cognito for Browser Extensions

Lorenzo Rivosecchi -

olabisioleyede profile image

How to Minimize HTTP Requests for a Faster Website

OlabisiOleyede -

mike_andreuzza profile image

How to create a rating system with Tailwind CSS and Alpinejs

Michael Andreuzza -

yuricodesbot profile image

Supabase Auth now supports Anonymous Sign-ins

Yuri -