DEV Community: Max Frolov

Reusable logic with React HOC

Max Frolov — Tue, 23 Jun 2020 09:42:30 +0000

In the previous post, I've covered Reusable logic with React Render Props .

This time I will tell you how:
a) to use HOC correctly and which cases it should be used in;
b) to take out the logic that can be reused in other components.

Thanks to the HOC (higher-order component) pattern we can easily create "modules" that can both accept options for internal use and passing additional functionality. This functionality will help to implement many things without describing the same logic within each component where it is used.

So HOC is a higher-order component aka a higher-order function which takes a component as an argument and returns another component. The returned component render will contain the passed component but with more advanced functionality.

It is important to pass the received props inside the EnhancedComponent further to the ComposedComponent. Otherwise, all props that we will pass externally will remain closed at the EnhancedComponent level.

The main tasks of HOC are:

a) to expand the functionality of the wrapped component;
b) to store logic that can be reused.

A brief description of the HOC can be written as follows:
(component) => (props) => { ...logic return extendedComponent }.

How to understand the moment to use HOC has come?

Let's imagine we have two pages for a registered user.

On every page we need:
a) to understand whether the user is authorized in the system;
b) to obtain user profile data if authorized.

As a comparison let's firstly write logic without using HOC.

First page:

const PageFirst = () => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)
    const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })

    React.useEffect(() => {
      handleGetUser()
    }, [])

    const handleGetUser = async () => {
      try {
        setUserLoadingState(true)

        const response = await getUser()

        setUserProfile({ isAuthorized: true, data: response.data })
      } catch (error) {
        console.log('Error while User preload:', error)
      } finally {
        setUserLoadingState(false)
      }
    }

    if (!userProfile.isAuthorized && !isUserLoading) {
      return <div>U're not authorized</div>
    }

    return (
      <div>
        {isUserLoading ? (
          <div>Loading...</div>
        ) : (
          <>
            <div>Your First Name: {userProfile.data.firstName}</div>
            <div>Your Last Name: {userProfile.data.lastName}</div>
          </>
        )}
      </div>
    )
  }

Second page:

const PageSecond = () => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)
    const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })

    React.useEffect(() => {
      handleGetUser()
    }, [])

    const handleGetUser = async () => {
      try {
        setUserLoadingState(true)

        const response = await getUser()

        setUserProfile({ isAuthorized: true, data: response.data })
      } catch (error) {
        console.log('Error while User preload:', error)
      } finally {
        setUserLoadingState(false)
      }
    }

    if (!userProfile.isAuthorized && !isUserLoading) {
      return <div>U're not authorized</div>
    }

    return (
      <div>
        {isUserLoading ? (
          <div>Loading...</div>
        ) : (
          <div>
            Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
          </div>
        )}
      </div>
    )
  }

As we see in the example above we can take out:

a) a function to obtain a user;
b) a state of userProfile and isUserLoading;
c) repeating condition for rendering a message the user is not authorized and a user loading message. (message about user loading)

Let's try to move these elements to the HOC (withAuth). Usually, the prefix “with” is used in the name of the HOC.

HOC withAuth:

const withAuth = ComposedComponent => {
    const EnhancedComponent = (props) => {
      // state
      const [isUserLoading, setUserLoadingState] = React.useState(false)
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })

      React.useEffect(() => {
        handleGetUser()
      }, [])

      const handleGetUser = async () => {
        try {
          setUserLoadingState(true)

          const response = await getUser()

          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          setUserLoadingState(false)
        }
      }

      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }

      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...props} userProfile={userProfile} />}</>
    }

    return EnhancedComponent
  }

  const PageFirst = withAuth(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))

  const PageSecond = withAuth(({ userProfile }) => (
    <div>
      Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
    </div>
  ))

Now we have HOC withAuth which took upon all the logic of getting userProfile. In order to get profile data inside the component, it is enough to wrap our component in withAuth. Optimization helped us to reduce the code by almost half: from 80 rows to 47.

In order to pass additional parameters to the HOC you need to use a higher-order function.

Short description:
(...arguments) => (component) => (props) => { ...logic return extendedComponent }.

Example of parameter passing to HOC:

// higher order functions
  const withAuth = (options = { isAdmin: false }) => ComposedComponent => {
    const EnhancedComponent = (props) => {
      // state
      const [isUserLoading, setUserLoadingState] = React.useState(false)
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })

      React.useEffect(() => {
        handleGetUser()
      }, [])

      const handleGetUser = async () => {
        try {
          setUserLoadingState(true)

          const response = await getUser(options.isAdmin)

          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          setUserLoadingState(false)
        }
      }

      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }

      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...props} userProfile={userProfile} />}</>
    }

    return EnhancedComponent
  }

  // passing options
  const PageFirst = withAuth({ isAdmin: true })(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))

Certainly, it is possible not to create another function and pass options by a second argument on the first call together with the component. But this will not be quite correct from the composition point of view.

In the case of HOC it is better not to mix the component transfer along with the options but to separate them by passing them to each function separately. This is a more flexible option since we can close certain options and use HOC by passing the necessary parameters to it in advance.

Example of parameter closure in HOC:

const withAuthAdmin = withAuth({ isAdmin: true })
  const withAuthDefault = withAuth({})

  const PageFirst = withAuthAdmin(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))

  const PageSecond = withAuthDefault(({ userProfile }) => (
    <div>
      Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
    </div>
  ))

The HOC can also return a component wrapped in another HOC.

When we turn the EnhancedComponent to the HOC we will access all the functionality of the HOC inside the EnhancedComponent, through props. Then we can decide whether to pass it to the ComposedComponent or not.

Example of using HOC inside HOC:

const withLoadingState = ComposedComponent => props => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)

    const handleSetUserLoading = value => {
      setUserLoadingState(value)
    }

    return <ComposedComponent {...props} isUserLoading={isUserLoading} handleSetUserLoading={handleSetUserLoading} />
  }

  const withAuth = ComposedComponent => {
    const EnhancedComponent = ({ isUserLoading, handleSetUserLoading, ...rest }) => {
      // state
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })

      React.useEffect(() => {
        handleGetUser()
      }, [])

      const handleGetUser = async () => {
        try {
          handleSetUserLoading(true)

          const response = await getUser()

          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          handleSetUserLoading(false)
        }
      }

      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }

      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...rest} userProfile={userProfile} />}</>
    }

    // here we wrap EnhancedComponent with HOC
    return withLoadingState(EnhancedComponent)
  }

I believe after reading this post you will think where you could use HOC in your current or future project.

More tips and best practices on my Twitter.
More tutorials here.

Feedback is appreciated. Cheers!

Reusable logic with React Render Props

Max Frolov — Fri, 29 May 2020 11:41:14 +0000

In this post, I want to introduce you RenderProps: what is it and how to use it.

RenderProps is a pattern, as well as HOC (higher order component) it's designed to pack logic into a component for further reuse where required. Simply said, it is a component that takes props, one of which must be a function. Calling this function, we can pass the data by arguments that will be available in the component from which the function was passed.

The main advantage of RenderProps versus HOC:

You can pass data from the involving component to the RenderProps component via props. In a HOC case, we can only pass static data as function arguments.

Short description: ({children}) = > {logic... return children(args) }

Imagine we have two pages where each needs to fetch user data. The logic for each page is repeating so we will create a ProvideAuth component which provides the user profile and loading state

An example of RenderProps usage with "children as prop":

const ProvideAuth = ({ children }) => {
   // state
   const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
   const [isUserLoading, setUserLoadingState] = React.useState(false)

   const handleSetUserLoading = value => {
     setUserLoadingState(value)
   }

   React.useEffect(() => {
     handleGetUser()
   }, [])

   const handleGetUser = async () => {
     try {
       handleSetUserLoading(true)

       const response = await getUser()

       setUserProfile({ isAuthorized: true, data: response.data })
     } catch (error) {
       console.log('Error while User preload:', error)
     } finally {
       handleSetUserLoading(false)
     }
   }

   if (!userProfile.isAuthorized && !isUserLoading) {
     return <div>U're not authorized</div>
   }

   return (
     <>
       {isUserLoading ? (
         <div>Loading...</div>
       ) : (
         <>
           {/* call children function and provide data */}
           {children({ userProfile, isUserLoading })}
         </>
       )}
     </>
   )
 }

 const PageFirst = () => (
   <ProvideAuth>
     {/* provide a function as children and return ReactNode */}
     {({ userProfile }) => (
       <>
         <div>Your First Name: {userProfile.data.firstName}</div>
         <div>Your Last Name: {userProfile.data.lastName}</div>
         <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
       </>
     )}
   </ProvideAuth>
 )

 const PageSecond = () => (
   <ProvideAuth>
     {/* provide a function as children and return ReactNode */}
     {({ userProfile }) => (
       <div>
         Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
       </div>
     )}
   </ProvideAuth>
 )

If RenderProps (ProvideAuth) wraps elements within render, a function that returns children is specified instead of children as ReactNode(s). The data passed from the ProvideAuth are the arguments for this function. Thus, unlike a standard container where children can be ReactNode(s), we pass a function, once called, returns a ReactNode. That 's all the magic RenderProps.

Instead of children, we can pass the function as props with a common name and return the ReactNode as well.

Example of using RenderProps with "custom prop":

const ProvideAuth = ({ renderAuth }) => {
   // state
   const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
   const [isUserLoading, setUserLoadingState] = React.useState(false)

   const handleSetUserLoading = value => {
     setUserLoadingState(value)
   }

   React.useEffect(() => {
     handleGetUser()
   }, [])

   const handleGetUser = async () => {
     try {
       handleSetUserLoading(true)

       const response = await getUser()

       setUserProfile({ isAuthorized: true, data: response.data })
     } catch (error) {
       console.log('Error while User preload:', error)
     } finally {
       handleSetUserLoading(false)
     }
   }

   if (!userProfile.isAuthorized && !isUserLoading) {
     return <div>U're not authorized</div>
   }

   return (
     <>
       {isUserLoading ? (
         <div>Loading...</div>
       ) : (
         <>
           {/* call renderAuth prop function and provide data */}
           {renderAuth({ userProfile, isUserLoading })}
         </>
       )}
     </>
   )
 }

 const PageFirst = () => (
   <ProvideAuth
     // provide prop renderAuth function and return ReactNode
     renderAuth={({ userProfile }) => (
       <>
         <div>Your First Name: {userProfile.data.firstName}</div>
         <div>Your Last Name: {userProfile.data.lastName}</div>
         <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
       </>
     )}
   />
 )

 const PageSecond = () => (
   <ProvideAuth
     // provide prop renderAuth function and return ReactNode
     renderAuth={({ userProfile }) => (
       <div>
         Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
       </div>
     )}
   />
 )

As a matter of experience, I can say RenderProps is ideal for creating UI modules that can be reused in different projects. They can be easily adapted to the needs of each project where applicable. That is very important for development acceleration.

More tips and best practices on my Twitter.
More tutorials here.

Feedback is appreciated. Cheers!

It's so annoying in 2020 you have to work with an ancient API which forces to use FormData

Max Frolov — Fri, 15 May 2020 17:25:11 +0000

Here is a FormData helper for plain Object:

export const getFormData = (input) => {
  const formData = new FormData();

  Object.keys(input).forEach((key) => {
    if (typeof !input[key] === "undefined") {
      return;
    }

    Array.isArray(input[key])
      ? (input[key]).forEach((value) => formData.append(`${key}[]`, value))
      : formData.append(key, `${input[key]}`);
  });

  return formData;
};

More tips and best practices on my Twitter.

React Hook around Apollo GraphQL mutation

Max Frolov — Fri, 08 May 2020 14:57:33 +0000

Here is an example of custom hook around Apollo mutation, which includes error and loading states to keep UX in sync with what is happening.
BTW you can check React Hook around Apollo GraphQL query here.

import * as RH from "@apollo/react-hooks";
import gql from "graphql-tag";

// activate user query
export const ACTIVATE_USER_MUTATION = gql`
  mutation ActivateUserMutation($input: ActivateUserInput) {
    activateUser(input: $input) {
      firstName
      lastName
      online
      id
    }
  }
`;

// entity mutation hook
export const useActivateUserMutation = () => {
  // gql hook
  const [activateUser, { data, loading, error }] = RH.useMutation(ACTIVATE_USER_MUTATION);

  const handleActivateUser = async (variables) => {
    try {
      const {
        data: {
          activateUser: { id }
        }
      } = await activateUser({ variables });
      // call fn to show some success box in the interface

      return id;
    } catch (error) {
      // parse error here
      console.log(error.graphQLErrors)
    }
  };

  return {
    activateUser: handleActivateUser, // mutation handler
    result: data, // mutation result
    isLoading: loading, // loading state
    error // mutation error state
  };
};

More tips and best practices on my twitter.

Feedback is appreciated. Cheers!

React Hook around Apollo GraphQL query

Max Frolov — Fri, 08 May 2020 11:50:42 +0000

Here is an example of the custom hook around Apollo query, with simple reuse and keeping things in one place.
BTW you can check React Hook around Apollo GraphQL mutation here.

import * as RH from "@apollo/react-hooks";
import gql from "graphql-tag";
 
// users query
export const USERS_LIST_QUERY = gql`
  query GetUsersQuery($input: UsersInput) {
    getUsers(input: $input) {
      firstName
      lastName
      online
      id
    }
  }
`;
 
// query entity hook
export const useUsersQuery = (variables = {}) => {
  const { data, loading, error } = RH.useQuery(USERS_LIST_QUERY, {
    variables: { input: { online: false, ...variables } }
  });
 
  return {
    users: data?.getUsers || [], // list with default value
    isLoading: loading, // loading state
    error: error?.graphQLErrors, // parse errors here
    refetchUsers: data.refetch // refetch your query
  };
};

More tips and best practices on my twitter.

Feedback is appreciated. Cheers!

React performance optimization with useMemo & memo

Max Frolov — Tue, 05 May 2020 05:54:34 +0000

In this article, I will provide a set of techniques to optimize child components re-rendering. There are many circumstances of unnecessary component re-rendering. Usually, it happens because of the parent component inside which the state changes.

Firstly we should note:

any manipulation with component state leads to re-rendering of entire components tree in spite of the interaction with parent component state.

In case your app is small, without heavy components - additional re-rendering is bearable. It doesn't affect app performance so much. The bigger app and individual components inside it - the more noticeable effects of unnecessary re-rendering are. It leads to processes delay and increasing of loads on all components.

Here is the example of such re-rendering. To track the re-rendering I left console.log in the render of each internal component. The number of the re-rendered element will be displayed in the console.

---FormContainer

------ItemComponent1 (console.log)

---------ItemComponent2 (console.log)

There are several options to solve this problem:

№1 - useMemo

This hook is mainly designed to optimize calculations. The calculation restarts if the dependencies specified as a second argument changed. Thus, the load on the component reduce.

useMemo is also applicable to components, returning them persisted. It works if the dependencies do not change during the component 's lifecycle. In case we don't specify dependencies (leave an empty array) - the component remains, as it was at the time of initialization. All the passed parameters remain closed in the initial state.

import React from 'react'

  // local variables
  const FIELD_NAMES = {
    FIRST_NAME: 'firstName',
    LAST_NAME: 'lastName'
  }

  const FormContainer = () => {
    const [formValues, changeFormValues] = React.useState({
      [FIELD_NAMES.FIRST_NAME]: '',
      [FIELD_NAMES.LAST_NAME]: ''
    })

    const handleInputChange = fieldName => e => {
      const fieldValue = e.target.value

      changeFormValues(prevState => ({
        ...prevState,
        [fieldName]: fieldValue
      }))
    }

    return (
      <div>
        <input
          type='text'
          onChange={handleInputChange(FIELD_NAMES.FIRST_NAME)}
          name={FIELD_NAMES.FIRST_NAME}
          value={formValues[FIELD_NAMES.FIRST_NAME]}
        />
        <input
          type='text'
          onChange={handleInputChange(FIELD_NAMES.LAST_NAME)}
          name={FIELD_NAMES.LAST_NAME}
          value={formValues[FIELD_NAMES.LAST_NAME]}
        />

        <ItemComponent1 />
      </div>
    )
  }

  const ItemComponent1 = () => {
    console.log('ITEM 1 RENDERED')

    return React.useMemo(
      () => (
        <div>
          <span>Item 1 component</span>
          <ItemComponent2 />
        </div>
      ),
      []
    )
  }

  const ItemComponent2 = () => {
    console.log('ITEM 2 RENDERED')

    return <div>Item 2 component</div>
  }

In the example above, we used useMemo inside ItemComponent1. Thus anything returns the component will be initialized only once. It won't be re-rendered at the time of parent re-rendering.

Below you can see the result of how hook works:

As you see, when the state changes inside the FormContainer, the useMemo does not allow component ItemComponent1 to re-render.
One more thing. Let's assume we specified firstName as a dependency passed via props from the parent. In this case, the component will be re-rendered only if firstName value changes.

№2 - memo

You can reach the same effect using a high order component (HOC) named memo. If you don’t want the component ItemComponent2 involved in re-rendering - wrap it in memo. Here we go:

const ItemComponent2 = React.memo(() => {
  console.log('ITEM 2 RENDERED')

  return <div>Item 2 component</div>
})

If we pass props to a component wrapped in a HOC memo, we will be able to control the re-rendering of that component when the prop changes. To do this we should pass as a second argument a function which:

Compares the props values before and after the change (prevProps and nextProps)
Returns a boolean value upon which React will understand whether to re-rendered the component or no.

  const ItemComponent1 = ({ firstNameValue, lastNameValue }) => {
    console.log('ITEM 1 RENDERED')

    return (
      <div>
        <span>Item 1 component</span>
        <ItemComponent2
         firstNameValue={firstNameValue}
         lastNameValue={lastNameValue}
        />
      </div>
    )
  }

  const ItemComponent2 = React.memo(
    () => {
      console.log('ITEM 2 RENDERED')

      return <div>Item 2 component</div>
    },
    (prevProps, nextProps) =>
      prevProps.firstNameValue !== nextProps.firstNameValue
  )

In this example above we compare old firstName and new props state. If they are equal the component will not be re-rendered. Hereby we ignore the lastName on which change the firstName will have the same value all the time. That is why the component will not be re-rendered.

You can see the result below:

React controls the second argument by default. This means comparing of the props value only to primitive types and one nested level. Props as objects, functions, or arrays will cause component re-render. You can control such moments describing needed comparison in the function. The function should passed as a second argument.

Another hooks tutorials:
useState useReducer

More tips and best practices on my twitter.

Feedback is appreciated. Cheers!

React Modal Manager Context

Max Frolov — Fri, 24 Apr 2020 17:17:55 +0000

In case your modal open/close/update logic sucks - grab & use this modal manager context.

import * as React from 'react'

export const ModalManagerContext = React.createContext({
  handleOpenModal: () => {},
  handleCloseModal: () => {},
  handleChangeModalData: () => {},
  handleUpdateModalData: () => {},
  isOpen: false,
  modalData: {}
})

const ModalManagerContextProvider = ({ children }) => {
  const [modalState, handleChangeState] = React.useState({
    isOpen: false,
    data: {}
  })

  const handleOpenModal = (data = {}) => {
    handleChangeState(prevState => ({
      isOpen: true,
      data: {
        ...prevState.data,
        ...data
      }
    }))
  }

  const handleCloseModal = () => {
    handleChangeState({ isOpen: false, data: {} })
  }

  const handleChangeModalData = (data = {}) => {
    handleChangeState(prevState => ({ ...prevState, data }))
  }

  const handleUpdateModalData = (data = {}) => {
    handleChangeState(prevState => ({ ...prevState, data: { ...prevState.data, ...data } }))
  }

  return (
    <ModalManagerContext.Provider
      value={{
        handleOpenModal,
        handleCloseModal,
        handleChangeModalData,
        handleUpdateModalData,
        isOpen: modalState.isOpen,
        modalData: modalState.data
      }}
    >
      {children}
    </ModalManagerContext.Provider>
  )
}

export default ModalManagerContextProvider

Check this 🍬 as well: React click outside hook.

More tips and best practices on my twitter.

Feedback is appreciated. Cheers!

React click outside hook

Max Frolov — Thu, 23 Apr 2020 17:11:09 +0000

In case your click outside logic sucks - grab & use this one:

const useClickOutside = (ref, handleClickOutside) => {
  React.useEffect(() => {
    const handleTargetClick = e => {
      if (ref.current && !ref.current?.contains(e.target)) {
        typeof handleClickOutside === "function" && handleClickOutside(e)
      }
    }

    document.addEventListener('mousedown', handleTargetClick, true)

    return () => {
      document.removeEventListener('mousedown', handleTargetClick, true)
    }
  })
}

JavaScript error handling pattern tip

Max Frolov — Wed, 22 Apr 2020 17:22:44 +0000

Don't throw a new Error(msg) if you not sure you handle it everywhere you use a module. It can break your app and it's not ideal UX for a user. You can follow the Either pattern from FP to avoid such situations.

// success and error cases
Success: { _tag: "Right", right: "Success data" }
Error: { _tag: "Left", left: "Error message" }

// helpers to define right or left value
export const isLeft = (left) => {
  switch (left._tag) {
    case 'Left':
      return true
    case 'Right':
      return false
  }
}

export const isRight = (right) => !isLeft(right)

export const right = (right) => ({ _tag: "Right", right })

export const left = (left) => ({ _tag: "Left", left })

// simple usage
import * as E from 'helpers/either'

const success = E.right("some value")
const error = E.isLeft("some error")

console.log(isRight(success) && success.right) // "some value"
console.log(isLeft(error) && error.left) // "some error"

React Hook that helps understand whether component mounted

Max Frolov — Sat, 18 Apr 2020 13:27:21 +0000

I use this hook a lot, so maybe somebody is looking for the same solution.

export const useIsMounted = () => {
  const isMountedRef = React.useRef(false)

  React.useEffect(() => {
    isMountedRef.current = true

    return () => {
      isMountedRef.current = false
    }
  }, [])

  return isMountedRef.current
}

React Hooks: useReducer. Complex state handling.

Max Frolov — Fri, 17 Apr 2020 14:02:05 +0000

In this article we'll try to solve useState vs. useReducer problem. With real life examples, of course 🎉.

Without further ado, let’s dive into it.

Let’s say there is an object each its property must be updated separately. Usually in such cases useState is used to update each property separately but it is not correct.

I highly recommend to use useReducer hook for these particular cases. The unique type of event which must be executed is clearly defined in this hook.

useReducer is also used when complex state updating depends on the previous one.

Here is the example how NOT TO DO.

  // local variables
  const MODAL_TYPES = {
    SMALL: 'small',
    MEDIUM: 'medium',
    LARGE: 'large'
  }

  const WrongModalStateComponent = () => {
    const [isModalOpen, changeModalOpenState] = React.useState(false)
    const [modalType, changeModalType] = React.useState(MODAL_TYPES.LARGE)
    const [userPhone, setUserPhone] = React.useState('')
    const [userJob, setUserJob] = React.useState('')
    const [userEmail, setUserEmail] = React.useState('')

    return (
      ...
    )
  }

Let’s try to write properly now by replacing useState with useReducer. We will set up actions to split updates of each property separately. These actions will describe how the state will be updated.

Each “action” should not mutate the state. We should always return new state based on previous one. Spread operators are usually applied in updating state. They allow to apply updates to exact properties without mutating other ones.

// local variables
  const MODAL_TYPES = {
    SMALL: 'small',
    MEDIUM: 'medium',
    LARGE: 'large'
  }

  const ACTION_TYPES = {
    SET_USER_FIELD: 'setUserField',
    TOGGLE_MODAL: 'toggleModal',
    CHANGE_MODAL_TYPE: 'changeModalType'
  }

  // initial state for useReducer
  const initialState = {
    isModalOpen: false,
    modalType: MODAL_TYPES.LARGE,
    modalData: {
      userPhone: '',
      userJob: '',
      userEmail: ''
    }
  }

  // reducer is just methods which invokes depends of action type
  const reducer = (store, action) => {
    switch (action.type) {
      case ACTION_TYPES.SET_USER_FIELD:
        return {
          ...store,
          modalData: { ...store.modalData, [action.fieldName]: action.value }
        }
      case ACTION_TYPES.TOGGLE_MODAL:
        return { ...store, isModalOpen: !store.isModalOpen }
      case ACTION_TYPES.CHANGE_MODAL_TYPE:
        return { ...store, modalType: action.modalType }
      default:
        return store
    }
  }

  const ReducerStateComponent = () => {
    // use hook to extract dispatch and state value
    const [userData, dispatch] = React.useReducer(
      reducer,
      initialState,
      undefined
    )

    const handleSetUserName = fieldName => value => {
      // example of how to set user field
      dispatch({ type: ACTION_TYPES.SET_USER_FIELD, value, fieldName })
    }

    const handleChangeModalType = () => {
      // example of how to change modal type
      dispatch({
        type: ACTION_TYPES.CHANGE_MODAL_TYPE,
        modalType: MODAL_TYPES.SMALL
      })
    }

    const handleToggleModal = () => {
      // example of how toggle modal
      dispatch({ type: ACTION_TYPES.TOGGLE_MODAL })
    }

    return <div>...</div>
  }

As this example shows, we can update component state using dispatch method. In turn, type is specified to call the required method to update the state.

The dispatch method remains unchanged. In other words, it does not cause re-rendering during its pass via props (as callback does) which led to unnecessary component re-renderers. Hence you can pass dispatch to child components by props as well as using React Context for this.

useReducer takes initializer as a third argument. Initializer is a function which returns a state based on the initial argument:
useReducer(reducer, initialArgs, (initialArgs) => ...initialState)

You can use any other construction instead of switch to perform the same actions. Let's change switch construction to object with methods where the key is action type and method will be in charge of state update.

In case of using TypeScript, this construction provides better possibilities to make types of methods to be in charge of update.

  // local variables
  const ACTION_TYPES = {
    SET_USER_FIELD: 'setUserField',
    TOGGLE_MODAL: 'toggleModal',
    CHANGE_MODAL_TYPE: 'changeModalType'
  }

  // initial state for useReducer
  const initialState = {
    isModalOpen: false,
    modalType: MODAL_TYPES.LARGE,
    modalData: {
      userPhone: '',
      userJob: '',
      userEmail: ''
    }
  }

  const handleActions = {
    [ACTION_TYPES.SET_USER_FIELD]: (store, { fieldName, value }) => ({
      ...store,
      modalData: { ...store.modalData, [fieldName]: value }
    }),
    [ACTION_TYPES.TOGGLE_MODAL]: store => ({
      ...store,
      isModalOpen: !store.isModalOpen
    }),
    [ACTION_TYPES.CHANGE_MODAL_TYPE]: (store, { modalType }) => ({
      ...store,
      modalType
    })
  }

  const reducer = (store, action) =>
    Boolean(handleActions[action.type])
      ? handleActions[action.type](store, action)
      : store

  const ReducerStateComponent = () => {
    // use hook to extract dispatch and state value
    const [userData, dispatch] = React.useReducer(
      reducer,
      initialState,
      undefined
    )

    ...
  }

Now you know how to manage complex state updates and can easily implement complex logic using useReducer hook.

By the way, i post tips & best practices on my twitter every day. Cheers

React Hooks: useState. Rules and tips for component state manipulation.

Max Frolov — Tue, 14 Apr 2020 11:52:29 +0000

figure out the way useState works;
logical conditions in render;
ways to perform an action after changing the state;
use prevState in a function to change the state;

In this article we’ll figure out what the useState is and the rules to follow for its successful use.

How the useSate works?

useState is a React hook for managing components rendering. The hook can be used inside each component which needs to be updated and re-rendered according to its state changes.

useState hook is a method that accepts just one argument which is an initial state.

This argument could be:

A function that returns initial state (using for a more complex way of its defining).
Some initial state.

useState returns an array of two elements:

Current state.
Function for updating current state.

Using useState we're able to divide logic into several states and each of it will be applied for proper element inside the render

Keep in mind that hooks have some particular rules of their use:

Hooks are available for calling only inside the body of a function component. Once you would try to call it inside another function, condition or loop inside the component, you’ll definitely get an error. To avoid getting an invalid hook call, useState should be initialized at the top of your component. Moreover, this makes it convenient for the use.
State value must be updated with given method from useState hook but not by direct reassignment (mutating).

WRONG: ourState = newValue.
RIGHT: changeStateValue(newValue).

Let’s take a look at the basic use of state when performing conditional rendering:

import React from 'react'

  const StateExample = () => {
    const [isElementVisible, changeElementVisibility] = React.useState(true)

    const handleHideElement = () => {
      changeElementVisibility(false)
    }

    return (
      <div>
        {isElementVisible && <div>Element that should be hidden on button click</div>}

        <button onClick={handleHideElement}>Hilde element above</button>
      </div>
    )
  }

  export default StateExample

Let's see what we’ve done: when doing destructuring assignment, the isElementVisible constant was assigned the initial state, and the changeElementVisibility constant got a function for updating the state.

How constants and functions should be properly named? The right name should briefly describe the purpose and the role that the constant or function will play in a particular component. It might seem too obvious at the first sight. But this recommendation is often neglected by the developers.

First things first, by doing this you ensure a rapid navigation across your entire project. In case the whole team is engaged for the project, the given name defines how quickly other developers can navigate through your code and continue working with it. Think of other people and be one step ahead. To get the right idea, try to always visualize yourself being completely new to this project or working in the pair.

To update component state it is vital to know that:

You should avoid to use anonymous function inside onClick and make changes directly out of there. The anonymous function will be initialized anew each time your page will render. Its affect the entire application performance.

You should use a predefined function to describe the state change, in our case handleHideElement. For example, if an element would not be hidden only by clicking on one button, but possibly somewhere else - we can easily reuse the handleHideElement function, reducing the amount of code and improving readability.

In our example, by clicking on the button, handleHideElement is called and the value is passed to changeElementVisibility. Thus, the state changes and the component is being re-rendered, hiding therefore the element we need.

import React from 'react'

  const StateExample = () => {
    const [isElementVisible, changeElementVisibility] = React.useState(true)

    // Correct usage
    const handleHideElement = () => {
      changeElementVisibility(false)
    }

    return (
      <div>
        {isElementVisible && <div>Element that should be hidden on button click</div>}
        {/* Don't do that */}
        <button onClick={() => changeElementVisibility(false)}>Hilde element above</button>
        {/* Correct usage */}
        <button onClick={handleHideElement}>Hilde element above</button>
      </div>
    )
  }

  export default StateExample

By the way, when performing conditional rendering, it is correct to use a construction with a logical AND(&&). If the left side of the condition (isElementVisible) returns false, React will ignore this element in the render. In case the left side returns true - the construct returns the element that React will draw in the browser.

What if you want to perform an action after changing state?

Working with classes you’re able to pass a callback function as the second argument to the setState method and this callback function would be fired as soon as state has been changed. However, using the useState hook we’re not able to do that. To reach the goal, you should apply the useEffectmethod by adding the dependency isElementVisible as the second argument. Thus, the function will be called each time the component state changes.

Be aware that useEffect method will be called at the very first component rendering and make sure you take this into account when building logic.


  import React from 'react'

  const StateExample = () => {
    const [isElementVisible, changeElementVisibility] = React.useState(true)

    React.useEffect(() => {
      // function will be called on each "isElementVisible" change
    }, [isElementVisible])

    const handleHideElement = () => {
      changeElementVisibility(false)
    }

    return (
      <div>
        {isElementVisible && <div>Element that should be hidden on button click</div>}

        <button onClick={handleHideElement}>Hilde element above</button>
      </div>
    )
  }

  export default StateExample

Using prevState in a function to change state

As you can see in the example above, the function that updates the state takes an updated value as an argument. Yet this is not all. It can also take a function that returns an updated value. The argument of this function is the current state until the next update takes place.

The example below shows the function used as an argument to update the state of input fields.


  import React from 'react'

  // local variables
  const FIELD_NAMES = {
    FIRST_NAME: 'firstName',
    LAST_NAME: 'lastName'
  }

  const StateExample = () => {
    const [formValues, changeFormValues] = React.useState({
      [FIELD_NAMES.FIRST_NAME]: '',
      [FIELD_NAMES.LAST_NAME]: ''
    })

    const handleInputChange = fieldName => e => {
      const fieldValue = e.target.value

      changeFormValues(prevState => ({
        ...prevState,
        [fieldName]: fieldValue
      }))
    }

    return (
      <div>
        <input
          type='text'
          onChange={handleInputChange(FIELD_NAMES.FIRST_NAME)}
          name={FIELD_NAMES.FIRST_NAME}
          value={formValues[FIELD_NAMES.FIRST_NAME]}
        />
        <input
          type='text'
          onChange={handleInputChange(FIELD_NAMES.LAST_NAME)}
          name={FIELD_NAMES.LAST_NAME}
          value={formValues[FIELD_NAMES.LAST_NAME]}
        />
      </div>
    )
  }

  export default StateExample

To update the state of a specific element by its name, use a higher order function and pass the names of the inputs across the closure before the event handler in the input is called. An anonymous function should be passed to changeFormValues method for changing input's state. This anonymous function returns a NEW state object based on the PREVIOUS one, but with an updated field.

You might have noticed that I’ve created the FIELD_NAMES variable and defined an object for it in which I described the names of the inputs to use them inside the component. Try to remember and make use of this approach. If you’ll have to change the name of the input, this could be easily done it once and in one place. I guess you can admit that this is much more convenient than changing the name in each input separately. This approach can be defined as ENUM.

Now having a full set of tools and using the state of the components correctly, you can easily implement complex logic for your application.

Thanks for reading this huge article, cheers!