React best practices and patterns to reduce code

React best practices and patterns to reduce code

I have been working with React.js for the past 4 to 5 years and have been using it for a number of different projects. While working on different projects I’ve found some common patterns I would like to share in this blog post. Without further ado, Let’s get started.

1. Create custom hooks for redux actions and dispatches

I’m not a fan of using redux, but I’ve been using it for a number of different projects. I’ve found that redux-thunk is used in almost all the projects I’ve worked on. I found that is more of a boilerplate code.

Let’s take an example of a redux-thunk project.

function fetchUser(id) {
  return (dispatch, getState, { api, otherValue }) => {
    return fetch(`/api/user/${id}`)
      .then(res => res.json())
      .then(user => dispatch({ type: ‘FETCH_USER’, payload: user }))
  }
}
function fetchUsers() {
  return (dispatch, getState, { api, otherValue }) => {
    return fetch(`/api/users`)
      .then(res => res.json())
      .then(user =>…