Simplify Maintenance of React Function Components

Nick Pachulski

August 30, 2021

Some function components expand to manage a range of responsibilities. Tracking which parts of the function body relate to the task at hand gets harder. Use well-named hooks to separate concerns out of the function body and into their own files.

Here’s an example of the most complex screen in a React Native app I’ve been working on. It shows small business owners all their credit card and bank account transactions to make expense tracking easier.

// imports removed for brevity

const Activity = (): React.ReactElement => {

  const { accountsProps, transactionsProps, searchHeaderShadowOpacity } =

  const PushNotificationPermissionPopup =

  return (
      <View style={styles.container}>
        <Accounts {...accountsProps} />
        <Transactions {...transactionsProps} />

export default Activity;

Changing when the push notification popup is shown doesn’t require sifting through animation specific code. Or code responsible for fetching things from the API and handling those types of failures.