Higher-Order Functions
A higher-order function is a function that either takes another function as an argument or returns a function as a result. This concept is fundamental in functional programming and allows for powerful abstractions.
Example:
function greet(name) {
return `Hello, ${name}!`;
}
function sayHello(fn, name) {
return fn(name);
}
console.log(sayHello(greet, 'Alice')); // Output: Hello, Alice!
In this example, sayHello
is a higher-order function because it takes another function (greet
) as an argument.
Higher-Order Components (HOCs)
In React, a higher-order component is a pattern used to enhance existing components. An HOC is a function that takes a component and returns a new component, often with additional props or behaviors.
Example:
import React from 'react';
function withGreeting(WrappedComponent) {
return function EnhancedComponent(props) {
return (
<div>
<h1>Welcome!</h1>
<WrappedComponent {...props} />
</div>
);
};
}
const MyComponent = ({ name }) => <p>My name is {name}.</p>;
const EnhancedMyComponent = withGreeting(MyComponent);
// Usage in a React app
// <EnhancedMyComponent name="Alice" />
In this example, withGreeting
is a higher-order component that adds a greeting before rendering the original component.
Key Takeaways
- Higher-Order Functions: Functions that take other functions as arguments or return them.
- Higher-Order Components: A React pattern for reusing component logic by wrapping components.
Top comments (0)