Designing Reusable React Components for Content Lists with Integrated Advertisements

The author, a front‑end engineer at Qiwuke, presents a real‑world scenario where a news feed must interleave advertisement cards according to specific rules, requiring both data fetching and click/impression tracking.

He first shows a straightforward class‑based implementation that stores newsData and adData in state, calculates the number of ads needed, and pushes <NewsCard> and <AdCard> components into an array before rendering.

import React from 'react';
export default class extends React.Component {
  state = { newsData: [], adData: [] };
  // ...getNewsData(), getAdData(), render() that builds comps array
}

Next, the article reviews common React component design patterns: Context, composition, inheritance, container‑presentational components, render props, and higher‑order components (HOC). For each pattern, advantages and drawbacks are discussed, and sample code is provided.

Composition example using a <Modal> component with slots:

<Modal>
  <Modal.Title>Modal Title</Modal.Title>
  <Modal.Content>Modal Content</Modal.Content>
  <Modal.Footer><button>OK</button></Modal.Footer>
</Modal>

Inheritance example shows a class extending another component to reuse lifecycle methods, noting the pitfalls of prototype‑based inheritance in JavaScript.

Container‑presentational pattern separates data fetching from UI rendering, illustrated by a NewsList container that passes newsData and adData to a stateless List component.

class NewsList extends React.Component {
  state = { newsData: [], adData: [] };
  render() {
    return
;
  }
}

Render Props refactors the rendering logic into a function prop, but warns about potential performance issues due to new function instances on each render.

Higher‑Order Component wraps a component to inject news or ad data, demonstrating how HOCs can abstract data logic while also highlighting possible prop‑name collisions and deep component trees.

function withNews(Comp) {
  return class extends React.Component {
    state = { newsData: [] };
    render() { return
; }
  };
}
function withAd(Comp) { /* similar */ }
const ListWithNewsAndAd = withAd(withNews(List));

After evaluating these patterns, the author proposes a Hook‑based solution to address the earlier shortcomings. Custom hooks useFetchMediav and useMediavEvent encapsulate ad fetching and event binding, while useState and useEffect manage component state and side effects.

import { useState, useEffect, useRef } from 'react';
import { useFetchMediav, useMediavEvent } from '@q/mediav';
function App() {
  const [newsData, setNewsData] = useState([]);
  const adData = useFetchMediav({ id: 'xxx', length: newsData.length / 2 });
  // build comps array with NewsCard and AdCard using hooks
}
function AdCard({ data }) {
  const ref = useRef(null);
  const bind = useMediavEvent(ref, data);
  return
{...bind}{data.title}
;
}

The Hook approach improves reusability and readability, but the article also notes limitations: hooks rely on call order, cannot be placed inside conditional blocks, and combine multiple lifecycle phases, which can lead to performance pitfalls if misused.

Finally, the article lists reference materials and a brief promotional footer.