What is render hijacking in react?

The concept of render hijacking is the ability to control what a component will output from another component. It means that you decorate your component by wrapping it into a Higher-Order component. By wrapping, you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually enable hijacking, but by using HOC you make your component behave differently.

Practical Code Example

// Render Hijacking: A Higher-Order Component intercepts and modifies rendered output
function withLoader(WrappedComponent) {
  return function ({ isLoading, ...props }) {
    if (isLoading) return <div>Loading...</div>; // Hijacks render!
    return <WrappedComponent {...props} />;
  };
}