{"id":49106,"library":"react-websocket","title":"React WebSocket","description":"React WebSocket is a component-based library for integrating WebSocket connections into React applications. Version 2.1.0 is the latest stable release, with infrequent updates and dependence on community contributions. It provides a simple <Websocket> component with props for URL, message handling, and connection events, and includes built-in reconnection logic. Unlike more complex alternatives, this library offers a minimal, declarative approach but is less actively maintained and lacks advanced features like request/response patterns or subscription management. It requires React 0.14.5+.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/mehmetkose/react-websocket","tags":["javascript","reactjs","websocket","react","connection"],"install":[{"cmd":"npm install react-websocket","lang":"bash","label":"npm"},{"cmd":"yarn add react-websocket","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-websocket","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for JSX rendering","package":"react","optional":false},{"reason":"Peer dependency required for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Default export only; named import will result in undefined.","wrong":"import { Websocket } from 'react-websocket'","symbol":"Websocket","correct":"import Websocket from 'react-websocket'"},{"note":"CJS requires .default because library uses ESM-style default export.","wrong":"const Websocket = require('react-websocket')","symbol":"default","correct":"const Websocket = require('react-websocket').default"},{"note":"Destructuring require() will not work; must use .default.","wrong":"const { Websocket } = require('react-websocket')","symbol":"Websocket","correct":"import Websocket from 'react-websocket'"}],"quickstart":{"code":"import React from 'react';\nimport Websocket from 'react-websocket';\n\nfunction App() {\n  const [count, setCount] = React.useState(90);\n  const handleData = (data) => {\n    const result = JSON.parse(data);\n    setCount(prev => prev + result.movement);\n  };\n  return (\n    <div>\n      Count: <strong>{count}</strong>\n      <Websocket url='ws://localhost:8888/live/product/12345/' onMessage={handleData} />\n    </div>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Basic usage: renders a WebSocket component that receives JSON messages and updates state."},"warnings":[{"fix":"Manually JSON.parse(data) inside onMessage.","message":"onMessage callback receives raw data (string) – not parsed JSON.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure parent component unmounts to trigger WebSocket close.","message":"Component does not unmount cleanly; may cause memory leaks.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Append parameters to URL or implement custom wrapper.","message":"Library has no built-in authorization or headers support.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set reconnect prop to false and implement custom reconnect if needed.","message":"Reconnection logic uses accelerated backoff; may flood server on flaky connections.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using alternative libraries like react-use-websocket or socket.io-client.","message":"Library is not actively maintained; open issues may go unanswered.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'0.14.5':83 '2.1.0':19 'activ':68 'advanc':72 'altern':57 'applic':17 'approach':64 'base':9 'built':50 'built-in':49 'communiti':31 'complex':56 'compon':8,37 'component-bas':7 'connect':14,45,88 'contribut':32 'declar':63 'depend':29 'event':46 'featur':73 'handl':43 'includ':48 'infrequ':26 'integr':12 'javascript':84 'lack':71 'latest':22 'less':67 'librari':10,59 'like':74 'logic':53 'maintain':69 'manag':79 'messag':42 'minim':62 'offer':60 'pattern':76 'prop':39 'provid':34 'react':1,3,16,82,87 'reactj':85 'reconnect':52 'releas':24 'request/response':75 'requir':81 'simpl':36 'stabl':23 'subscript':78 'unlik':54 'updat':27 'url':41 'version':18 'websocket':2,4,13,86","created_at":"2026-06-07T17:00:05.205636+00:00","updated_at":"2026-06-07T17:00:05.205636+00:00","problems":[{"fix":"Run 'npm install react-websocket --save' and ensure React is installed.","cause":"Package not installed or missing because only peer deps exist.","error":"Module not found: Can't resolve 'react-websocket'"},{"fix":"Use 'import Websocket from \"react-websocket\"' (without braces).","cause":"Using named import instead of default import.","error":"TypeError: Websocket is not a constructor"},{"fix":"Add url prop like <Websocket url='ws://example.com' onMessage={...} />.","cause":"Missing url prop on <Websocket> component.","error":"Warning: Failed prop type: The prop `url` is marked as required in `Websocket`"},{"fix":"Ensure server sends valid JSON or wrap parse in try-catch.","cause":"onMessage receives raw string; code tries JSON.parse on non-JSON data.","error":"Uncaught SyntaxError: Unexpected token u in JSON at position 0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/mehmetkose/react-websocket","github":"ssh://git@github.com/mehmetkose/react-websocket","docs":null,"changelog":null,"pypi":null,"npm":"react-websocket","openapi_spec":null,"status_page":null,"smithery":null,"categories":["messaging"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}