{"id":11181,"library":"jsondiffpatch-react","title":"JSON Diff Patch for React","description":"jsondiffpatch-react is a React component designed to visualize differences between two JavaScript objects or arrays, built upon the core `jsondiffpatch` library. The current stable version is 1.0.8, with recent minor updates indicating active maintenance rather than rapid feature development. It originated as a fork of the now-archived `jsondiffpatch-for-react` project. Its key differentiator is providing a readily available React component for rendering detailed, annotated JSON deltas in an HTML format, significantly simplifying the integration of JSON comparison UIs into React applications without needing to implement diff visualization from scratch. It offers configurable options such as showing or hiding unchanged values and enabling a custom `objectHash` function, which is particularly beneficial for optimizing array comparison, especially when dealing with lists of objects that may not have inherent stable unique identifiers.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/bluepeter/jsondiffpatch-react","tags":["javascript","react","json","diff"],"install":[{"cmd":"npm install jsondiffpatch-react","lang":"bash","label":"npm"},{"cmd":"yarn add jsondiffpatch-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsondiffpatch-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is exported as a default export, intended for use in ES module environments within React applications.","wrong":"const JsonDiffReact = require('jsondiffpatch-react');","symbol":"JsonDiffReact","correct":"import JsonDiffReact from 'jsondiffpatch-react';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport JsonDiffReact from 'jsondiffpatch-react';\n\nconst App = () => {\n  const [leftData] = useState({\n    id: 1, \n    name: 'Alice',\n    age: 30,\n    hobbies: ['reading', 'coding', { type: 'music', genre: 'classical' }],\n  });\n  const [rightData] = useState({\n    id: 1, \n    name: 'Alice',\n    age: 31,\n    hobbies: ['reading', 'gaming', { type: 'music', genre: 'jazz' }],\n    status: 'active'\n  });\n  const [identicalData] = useState({ id: 2, name: 'Bob', email: 'bob@example.com' });\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>JSON Diff React Examples</h1>\n      \n      <h2>Changed Data with Annotations</h2>\n      <p>Differences between two complex objects, showing annotations.</p>\n      <JsonDiffReact\n        left={leftData}\n        right={rightData}\n        show={true}\n        annotated={true}\n        tips=\"No differences detected.\"\n        objectHash={(obj) => obj.id || obj.name || JSON.stringify(obj)}\n      />\n\n      <h2>Identical Data (with custom tips)</h2>\n      <p>When data is identical, a custom tip message is displayed.</p>\n      <JsonDiffReact\n        left={identicalData}\n        right={identicalData}\n        show={true}\n        annotated={false}\n        tips=\"The objects are exactly the same!\"\n      />\n\n      <h2>Hiding Unchanged Values</h2>\n      <p>Only the differing parts are displayed, providing a more concise view.</p>\n      <JsonDiffReact\n        left={{ a: 1, b: 2, c: { d: 4 } }}\n        right={{ a: 1, b: 3, c: { d: 4, e: 5 } }}\n        show={false}\n        annotated={false}\n      />\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to use the `JsonDiffReact` component to display differences between two JavaScript objects, including examples of changed data with annotations, identical data with custom tips, and how to hide unchanged values for a more concise diff."},"warnings":[{"fix":"Always provide a robust `objectHash` function that generates a unique and consistent key for each object in an array. This typically involves using an `id` property or a combination of stable properties, e.g., `(obj) => obj.id || obj._id || obj.name || JSON.stringify(obj)`.","message":"The `objectHash` prop is crucial for accurate and performant array comparison when elements within arrays lack stable unique identifiers. Without it, `jsondiffpatch` might incorrectly identify moved or modified items as additions and deletions, leading to less precise diff results.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify your project's `package.json` for `react` and `react-dom` versions. Install or update them to a compatible version using `npm install react react-dom` or `yarn add react react-dom`.","message":"Ensure that `react` and `react-dom` peer dependencies are installed and compatible with the specified version ranges (`^16.8 || ^17 || ^18`). Mismatched or missing peer dependencies can lead to runtime errors, rendering issues, or unexpected behavior related to React's lifecycle and hooks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `show={true}` if you want to display the entire merged JSON structure with differences highlighted. Use `show={false}` for a more compact view that focuses solely on the differing elements and their immediate context.","message":"The `show` prop controls the visibility of *unchanged* values in the JSON structure. Setting `show={false}` will hide parts of the JSON that are identical between the `left` and `right` objects, providing a concise 'diff-only' view. This behavior can be misunderstood if the expectation is to see the full structure with changes merely highlighted.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import React from 'react';` at the top of your component file.","cause":"The `React` object was not imported into the scope where JSX is being used.","error":"ReferenceError: React is not defined"},{"fix":"Always ensure that both `left` and `right` props are provided with valid JSON-serializable data (objects, arrays, strings). If an 'empty' state is intended, provide an empty object `{}` or array `[]` rather than `undefined` or `null` for better component stability.","cause":"The `left` or `right` props were not provided, or were `undefined`/`null`, leading to attempts to iterate or access properties on non-existent data within the component.","error":"TypeError: Cannot read properties of undefined (reading 'map') OR TypeError: Cannot read properties of null (reading 'length')"},{"fix":"Implement and pass an `objectHash` prop that provides a unique and consistent key for each object in your arrays. This helps `jsondiffpatch` track object identities across changes. For example: `<JsonDiffReact objectHash={(obj) => obj.id || JSON.stringify(obj)} />`.","cause":"When comparing arrays of objects, `jsondiffpatch` without an appropriate `objectHash` function may fail to correctly identify modified objects if they lack stable unique identifiers. It might treat them as entirely new objects being added and old ones being removed.","error":"Incorrect diff output for arrays (e.g., items appear as deleted/added instead of modified)"}],"ecosystem":"npm"}