Skip to main content
SimilarExport ZIP
100%

React, removeEventListener and bind(this) gotcha

✓ Published0🌍 Public
RRestuta
Last edited Jan 13, 2016
Created on Dec 21, 2015

This example demonstrates a common memory-leak pitfall in React ES6 components: using `bind(this)` directly inside `addEventListener` and `removeEventListener` calls. The code shows a `resize` listener attached to `window` in `componentDidMount` and removed in `componentWillUnmount`, but because each `bind()` creates a new function reference, the removal fails. It then illustrates three fixes: binding once in the constructor, reassigning the method to its bound version, or using a class-level arrow function, highlighting how context binding affects cleanup in lifecycle methods.

AI-generated description

Similar vizzes

Loading thumbnail…

key bind

This example demonstrates a minimal React application that captures keyboard input. It renders an input field and logs a message to the console when the Enter key is pressed, using React’s `useState` and `onKeyPress` event handler. The code includes commented-out SVG elements and a `mousePosition` state, but only the input element is active. The app is built with React 16.9 and rendered via `ReactDOM.render` into the root div, with styling applied through an external stylesheet.

AAnimesh Nautiyal
58% match
Loading thumbnail…

Gist 782553a6e275e4bfc694a6a3a6d1a46f

This example demonstrates how the React `useRef` hook preserves a mutable value across re-renders, unlike the `createRef` API, which creates a new ref each render. It visually compares the two by displaying the current render index alongside the persisted value from `useRef` and the reset value from `createRef` after a button click triggers a state update. The code uses `React.useState` to drive re-renders and `React.useRef` to hold a stable reference, while `createRef` shows its transient nature. The example also uses `useEffect` with a custom comparison to illustrate deep object dependency handling, referencing the React documentation.

HHuyAms
58% match
Loading thumbnail…

Gist 3e6254d26d7dbeebc0b0f0c822baee60

This React example presents a minimal typing-race interface, displaying a header and a text input field. The application records the user’s keystrokes into the component’s state, updating the displayed text in real time. It uses React’s `React.Component`, the `event.target.value` property for input handling, and logs the current state to the console. The example demonstrates a basic two-way binding between a controlled input and the component’s state, showing the typed text as the user types.

115Dkatz
58% match
Loading thumbnail…

Gist fed523040b43046b27a52290d26c4ceb

This example visualizes the structure of a small React component hierarchy through a static code excerpt, showing how typed props and event handlers are passed between parent and child components. The code uses the Flow type checker to define an `onSubmit` prop as a `Function`, with class `A` passing its `handleSomeEvent` method to component `B` via a prop. The rendering approach is purely textual, relying on the explicit Flow annotations and JSX syntax to illustrate data flow rather than any graphical output. It demonstrates type-safe callback propagation in a React/Flow environment, though no runtime visualization or data processing library appears in the snippet.

CCaged
57% match
Loading thumbnail…

Eloquent JS: Chapter 8

This example demonstrates JavaScript exception handling and control flow from Chapter 8 of Eloquent JavaScript, using a React starter template. The code implements `reliableMultiply`, which retries a `primitiveMultiply` function that randomly throws a custom `MultiplicatorUnitFailure` error, and `withBoxUnlocked`, which temporarily unlocks a box object, executes a body function, and restores the lock state in a `finally` block. The page renders static HTML with inline CSS and empty script tags, showing error-catching patterns without visual output.

Eemberix@gmail.com
57% match
Loading thumbnail…

Arrow functions and "this"

This example demonstrates how arrow functions bind `this` to their enclosing lexical scope, unlike regular functions. The JavaScript code defines `Foo` and `Bar`, each with a `setTimeout` callback that logs `this` to the console. A regular function in `Foo` causes `this` to refer to the global `window` object, while the arrow function inside `Bar` preserves the constructor instance, printing `Bar`. The example uses native JavaScript `setTimeout` and `console.log` to illustrate the difference in behavior.

RRestuta
57% match
Loading thumbnail…

Small tests

This example demonstrates how React event handlers interact with contentEditable elements, rendering a large "Hey!" message that must be clicked or typed into to trigger console logs. The code defines a React class component with `handleClick` and `handleChange` methods bound to `onClick` and `onInput` props, using ReactDOM to mount the app into the root div. It relies on React 16.10.0 and ReactDOM production builds loaded via CDN, showcasing synthetic event handling on an editable HTML element.

Llapotok
57% match
Loading thumbnail…

Gist 4974858be3b0a24bbeed1a8fbbade3be

This example shows a collapsible accordion interface built with React, featuring three panels where the first two contain static placeholder text and the third embeds a user-editable input field. It demonstrates nested interactive components within a Bootstrap-style Accordion using the React framework. The code uses React.createElement and a custom class with getInitialState and handleChange methods to manage the input’s state, updating its value as the user types. The accordion and panel components come from a React library, and the example relies on ReactDOM.render to display the instance.

66ewis
57% match