Composition In React with params

Question

I am trying to create an architecture that in some way imitates the slots from VUE. The idea is for the parent component to be able to inject some props into the component and the child can inject the rest of the props.

This is how I tried to approach this problem, unfortunately this approach will not work because the compontent will be "monut" every time the parent re-render takes place.

Filters = (prams) => { 
  useEffect(()=>{ //RENDER ALL THE TIME },[])
    ...
}

ParentComponent = () => <ChildComponent Filters={(props) => <Filters propA={"A"} />}

             
ChildComponent = (props) => {
  const Filters = props.Filters;        
  render(<Filters probB="B" />)
}

I know, I can use useCallback for ((props) => <Filters propA={"A"} />), but only it will help only if what I want to pass to "propA" is steady. I want to "manage" <Filters /> component in parent, so that the child does not have to handle Filters logic (props).

Answer 1

React gives you proper API to do most things. Using it forces you into certain paradigms that are proven to work well.

You should probably have a look at the Context and Memo APIs from React.

Or if you have to select and update state from multiple components, you might wanna have a look at libraries that provide global state, like Redux and Recoil.

Context example

// The shape
interface ContextProps {
  myProp: string
}

// The context
export const MyContext = React.createContext<Partial<ContextProps>>({ 
  myProp: 'nothing' 
}); 

// The provider
<MyContext.Provider value={{ myProp: 'override' }}>
  {children}
</MyContext.Provider> 

// Consumer
const { myProp } = useContext(MyContext)

In some case you can also use useMemo or React.memo and use your own custom compare function if needed to prevent re-renders in very specific situations.