Components not cleaned up with turbo links navigation, part 2.

Open
#1,184 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, rails, react, ruby
Domain
frontend, web-dev

Research direction

Reproduce the behavior with ReactUJS 2.6.2, Rails 7.0.2, and Turbolinks navigation using the listed componentWillUnmount steps. Read PR1135 and the ReactUJS cleanup behavior; done means components unmount on navigation so intervals and in-progress work can be cleaned up without breaking scroll-position restoration.

Written by the indexing model from the issue text.

Description

enhancement

(I'd originally mentioned this in https://github.com/reactjs/react-rails/issues/1028, but since that's closed I wanted to open an issue for it to get some extra visibility)

Steps to reproduce
  • Write a component that performs cleanup in componentWillUnmount
  • visit a page containing that component
  • navigate away with turbolinks
Expected behavior

componentWillUnmount is called

Actual behavior

componentWillUnmount is never called

System configuration

Sprockets or Webpacker version: 6.4.1
React-Rails version: -
Rect_UJS version: 2.6.2
Rails version: 7.0.2
Ruby version: 3.1


What's the expected way of cleaning up react components on leaving the page?

Some of our components use setInterval to do something every x seconds, which call clearInterval in componentWillUnmount. Others might load and/or decode a large file, which gets aborted in componentWillUnmount.

I could possibly clean these up by having each component listen for turbolinks cleanup events, but having those components have to know that they're living in a turbolinks+react_ujs stack seems like unnecessary coupling.

I think this used to work, but PR1135 removed cleanup in favour of fixing the scroll-position restoration. That seems like something that should have been fixed upstream in Turbolinks rather than removing component-unmounts from ReactUJS ..?

Dominant language
JavaScript
Stars
6.8k
Forks
739
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react-rails

All issues in reactjs/react-rails

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.