Stack Overflow
Stack Overflow

Questions tagged [react-hoc]

Use this tag when you have questions regarding the HOC techinque, commonly used with React to enrich existing components with additional behaviour.

HOC, abbreviation for higher order component is a technique commonly used in the ReactJS library, usually to enrich another component's behaviour, for example, by passing to it additional data or functions via props. Usually this enrichment happens by using a helper function (HOC function) which takes as one of its parameters an existing component's type and returns the new, enriched component. A very popular example of HOC usage is the connect function in react-redux library to provide a component with pieces of redux state.

63 questions
0
votes
0 answers

Does cloning React elements that are server components cancel the performance benefit?

I have been trying out React Server Components in NextJS 13. I have stumbled on a case when I need to use the pattern of passing server components as props in a client component. The thing is, this is a HOC wrapper that attaches an onClick handler…
guben
  • 77
  • 7
0
votes
1 answer

Issues receiving parameters in High Order Components in React

I want to adjust a demo provided by some tutorial about React Design Patterns, subject: Higher Order Component. In the code the argument '2' for an userId is hardcoded inside of the component and can be found in the last line of the component…
Programmosaurus
  • 111
  • 1
  • 8
0
votes
0 answers

Using a High Order Component does not send data to the form in React

I want to adjust a demo provided by some tutorial about React Design Patterns, subject: Higher Order Component, and want to use an external data source from the url: https://jsonplaceholder.typicode.com/users/1 to display the data within my form. I…
Programmosaurus
  • 111
  • 1
  • 8
0
votes
1 answer

how to read the properties of a react component passed to a regular function?

I have a HOC: function withNavigationWatcher(Component: React.ComponentType> | React.ComponentType) { console.log('withNavigationWatcher Component', Component.props) // eslint-disable-next-line react/display-name …
AshBadCoder
  • 47
  • 5
0
votes
0 answers

How to override a component by creating a jest mock? (Error solving)

I have a test where I use a component called TableVirtuoso. This component is imported as following: import { TableVirtuoso } from 'react-virtuoso'; In my test I want to override the TableVirtuoso implementation by creating a mocked version with a…
Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191
0
votes
1 answer

How to pass props to a component when it's wrapped in a Higher Order Component?

I have the following code files and want to pass the props to a component wrapped inside a higher-order component. I need to pass props from the index page, but the components are wrapped inside two higher-order components. When I pass props to the…
Nasyx Nadeem
  • 241
  • 2
  • 12
0
votes
1 answer

How to use Redux Connect and customized HOC in same export

i want to know how we can use Redux Connect and Customized HOC in same export. for example we have component "TestComponent" and HOC "WithSampleHOC" and "Connect". export default .....?
Amirhossein Moghadam
  • 57
  • 2
  • 7
0
votes
1 answer

why my HOC Component is working properly ? #React

2 components :- ClickCounter, mouseHoverCounter ! 1 HOC component to do the counting work. earlier I was counting the click and mouse hover by writing separate counter method in each component(cliccounter,mousehovecounter), but now, I'm trying to…
Harsh Sharma
  • 3
  • 3
0
votes
1 answer

Create generic and dynamic component to replace standard component

I have Tree component, which renders TreeItemsRenderer that draws TreeItem. Each of them are seperate components. I need to accept dynamic component that replaces default TreeItem, and I need to have all default TreeItem props. (for ex: const…
Medet
  • 63
  • 1
  • 10
0
votes
1 answer

react HOC component not working after passed with dispatch and getstate from reduxjs

I have a piece of code down below work well before transformed to HOC component: class Filters extends React.Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe(() => this.forceUpdate()); …
juexu
  • 131
  • 2
  • 11
0
votes
1 answer

Why does the following HOC keep refreshing even though it is returning a memoized component?

For context, I am working with integrating a Django Rest Framework backend with Next.js + Next-Auth. I have most of the integration down, except one part. The requirement is to have a refresh token system that will try to refresh the access token…
mahieyin-rahmun
  • 1,486
  • 1
  • 12
  • 20
0
votes
1 answer

React and forwardRef

I have the following component which transforms checkbox into nice toggle switch const ToggleSwitch = forwardRef((props, ref) => { return (
Jakub Koudela
  • 160
  • 1
  • 18
0
votes
0 answers

How to create ref inside react hoc using typescript without forwardedRef

This is my code: import React, { InputHTMLAttributes, Component, ComponentClass, TextareaHTMLAttributes } from 'react'; // type TElementType = HTMLInputElement | HTMLTextAreaElement; // type TAttributesType = // |…
Steve Tomlin
  • 3,391
  • 3
  • 31
  • 63
0
votes
0 answers

Passing function from HOC to wrapped component resulting infinite loop

I want to make HOC with axios handler so i don't need to handling all possible feedback from response (404,200,401, response, etc) here's my withFetchingAxios: export default (Component)=> class extends React.PureComponent{ constructor(props) { …
flix
  • 1,688
  • 3
  • 34
  • 64
0
votes
2 answers

Pass dynamic title to HOC common function in reactjs

I have one common component for Success and rendering this component through navigating routes. SuccessComponent.jsx var pageTitle; const SuccessComponent = (props) => { pageTitle = props.location.state.title; return( <> jsx code here …
Krina Soni
  • 870
  • 6
  • 14
1 2
3
4 5