Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Question

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Currently in the process of combining multiple Material UI components for rendering. The code I have so far is:

export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore)));

This setup is functioning as expected. However, I am now looking to integrate a new HOC, specifically Material UI's withWidth HOC. I have attempted to inject this HOC in various places, but each time it causes the entire component to not display on the page. I have researched and found suggestions to use a third-party library named compose. Nevertheless, I would prefer to avoid that solution. If there are any alternative methods to achieve this, I would appreciate the insight. Thank you.

javascript css reactjs redux material-ui

Answer 1

Answer №1

In situations like this, React highly recommends using a compose utility function:

Many third-party libraries such as lodash (as lodash.flowRight), Redux, and Ramda offer the compose utility function.

export default compose(
 connect(mapStateToProps,mapDispatchToProps)
 withTheme(),
 withStyles(styles),
 withWidth()
)(ShopStore)

To see how compose is implemented, you can check out this version from redux:

export default function compose(...funcs: Function[]) {
  if (funcs.length === 0) {
    // infer the argument type so it is usable in inference down the line
    return <T>(arg: T) => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce(
    (a, b) =>
      (...args: any) =>
        a(b(...args))
  )
}

Answer 2

In situations like this, React highly recommends using a compose utility function:

Many third-party libraries such as lodash (as lodash.flowRight), Redux, and Ramda offer the compose utility function.

export default compose(
 connect(mapStateToProps,mapDispatchToProps)
 withTheme(),
 withStyles(styles),
 withWidth()
)(ShopStore)

To see how compose is implemented, you can check out this version from redux:

export default function compose(...funcs: Function[]) {
  if (funcs.length === 0) {
    // infer the argument type so it is usable in inference down the line
    return <T>(arg: T) => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce(
    (a, b) =>
      (...args: any) =>
        a(b(...args))
  )
}

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Answer №1

Similar questions

Configure remotePatterns in the next.config.js file on localhost to retrieve images from a local API source

Creating a Unique Navigation Bar Design in Bootstrap 4 with Custom Styling for Active

Examining React components using Angular-cli

Best practice for formatting a section of a material-ui document

Every time the attribute of the Angular controller changes, it is reinitialized

javascript hide rows without data

I am looking to create a password generator that saves all generated options to a file

Error encountered in Ionic app: array.push() is not a valid function

Utilizing web components in React by solely relying on a CDN for integration

The appearance of an unforeseen * symbol caused a

Sorting through a table based on the name of the element

Unable to find '@material-ui/core/icons/KeyboardArrowUp'

Arranging items by specific criteria in ng-repeat for a personalized sorting experience

Redirect using React Router to display a blank root page

What is causing the CSS loader to continue showing up even after all the items have finished loading?

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

What is the reason for the continual influx of new users being added to the database?

Objects That Are Interconnected in Typescript

Having Difficulty Positioning Tooltip Beside Input/Label Field

Convert information from a uint8array into a string and then into JSON format