Introduction: Why Integrating Other Libraries with React Matters

While React excels at building interactive UIs through a component-based approach, many developers need to leverage third-party JavaScript libraries for tasks like DOM manipulation, charting, animations, maps, and more.

Popular tools like jQuery, D3.js, Chart.js, or Bootstrap JS aren't built with React’s declarative model in mind—but you can still integrate them seamlessly.

Understanding how to bridge React with these libraries is crucial for:

• Working in legacy codebases

• Adding advanced features (e.g., rich charting or animations)

• Leveraging tools outside the React ecosystem

Let’s explore how React can integrate with other libraries, and what patterns make this interop smooth and safe.

Core Concept: Imperative vs Declarative

React is declarative: you describe what the UI should look like based on the current state.

Most third-party JS libraries (like jQuery or D3) are imperative: they modify the DOM directly.

To integrate them:

• Let React control the rendering

• Let third-party libraries control DOM elements after they've been mounted

Basic Pattern for Integration

1. Create a React component

2. Use useEffect or componentDidMount to initialize the external library

3. Use useRef to get a reference to the DOM node

4. Clean up on unmount using return () => {}

Example 1: Integrating jQuery with React

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';

function JQueryButton() {
  const buttonRef = useRef();

  useEffect(() => {
    // Initialize jQuery logic
    $(buttonRef.current).on('click', () => {
      alert('Button clicked using jQuery!');
    });

    // Clean up to prevent memory leaks
    return () => {
      $(buttonRef.current).off('click');
    };
  }, []);

  return <button ref={buttonRef}>Click Me</button>;
}

Example 2: Integrating Chart.js with React

npm install chart.js

import React, { useRef, useEffect } from 'react';
import { Chart } from 'chart.js/auto';

function ChartComponent() {
  const canvasRef = useRef();

  useEffect(() => {
    const chart = new Chart(canvasRef.current, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: 'Votes',
          data: [12, 19, 3],
          backgroundColor: ['red', 'blue', 'yellow']
        }]
      }
    });

    // Destroy chart on unmount
    return () => chart.destroy();
  }, []);

  return <canvas ref={canvasRef} width={400} height={200} />;
}

Example 3: Integrating D3.js with React

npm install d3

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

function D3Component() {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    svg.append('circle')
       .attr('cx', 50)
       .attr('cy', 50)
       .attr('r', 40)
       .attr('fill', 'green');

    return () => {
      svg.selectAll('*').remove();
    };
  }, []);

  return <svg ref={svgRef} width={100} height={100}></svg>;
}

Tips & Common Pitfalls

✅ Best Practices

• Use useRef to attach external libraries to specific DOM nodes

• Initialize libraries in useEffect (for function components) or componentDidMount (for class components)

• Always clean up side effects on component unmount

• Let React handle structure and let external libraries handle behavior

• Prefer libraries that support React bindings (e.g., react-chartjs-2, react-d3, etc.)

❌ Common Pitfalls

• Modifying the DOM directly from outside React (can cause inconsistent UI)

• Not cleaning up event listeners or DOM changes on unmount

• Conflicts between React and third-party libraries over the same DOM node

• Forgetting that some libraries re-render or overwrite DOM nodes, breaking React's virtual DOM expectations

Comparison: React Integration Options

Complete Example: React + Chart.js Bar Chart

import React, { useRef, useEffect } from 'react';
import { Chart } from 'chart.js/auto';

function BarChart() {
  const chartRef = useRef();

  useEffect(() => {
    const chart = new Chart(chartRef.current, {
      type: 'bar',
      data: {
        labels: ['Apple', 'Banana', 'Cherry'],
        datasets: [
          {
            label: 'Sales',
            data: [10, 20, 30],
            backgroundColor: ['#f00', '#ff0', '#0f0']
          }
        ]
      }
    });

    return () => chart.destroy();
  }, []);

  return <canvas ref={chartRef}></canvas>;
}

export default BarChart;

Conclusion: Make React Work With Any Library

React’s declarative style might seem incompatible with imperative third-party libraries at first—but with the right approach, you can integrate nearly any JavaScript library into your React app.

Whether you’re adding legacy jQuery features or using powerful data visualizations from D3 or Chart.js, React can support it—all you need is useRef, useEffect, and a bit of setup.

Key Takeaways

• Use useRef + useEffect to control third-party libraries

• Always clean up DOM changes or listeners

• Let React and libraries handle different layers (React = structure, library = behavior)

• Prefer React bindings when available