Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Component prop updates are ignored #142

Open
andyrichardson opened this issue Jun 21, 2019 · 9 comments · May be fixed by #146
Open

Component prop updates are ignored #142

andyrichardson opened this issue Jun 21, 2019 · 9 comments · May be fixed by #146
Labels
help wanted

Comments

@andyrichardson
Copy link

andyrichardson commented Jun 21, 2019 •
edited
Loading

Currently, component updates are being ignored

/** @internal */
public shouldComponentUpdate(nextProps, nextState) {
  return !SERVER_RENDERED
}

This means that any update to event handlers just straight up don't work.

In this example, regardless of any calls to setValue, whenever a key is pressed, only the first function passed to CodeMirror is called.

const component = () => {
  const [value, setValue] = useState("old value");
 
  const handleKeyPress = () => {
    console.log("key pressed - value is", value);
  }

  useEffect(() => {
    setValue("new value")
  }, []);

  // ...
  onKeyPress={handleKeyPress} // The new function is ignored on second render
  // ...
}

Edit: Looks like the issue in this case is due to the way SSR is being detected - I'm trying to use this inside a chrome devtools extension.

Edit 2: Nothing to do with a chrome extension... I've created a PR 👍
This was referenced Jun 21, 2019
Closed
Open
@mhuggins
Copy link

I ran into this with onBlur as well. This works if you point to an unchanging function reference (i.e.: class-based components with bound function handlers), but does not work with hooks that have ever-changing function references.

@mhuggins
Copy link

mhuggins commented Dec 11, 2019 •
edited
Loading

There may be a solution that involves useRef for the callback function, but I didn't pursue it too deeply since switching to a class based component resolved it for me.

@schnerd schnerd mentioned this issue Dec 13, 2019
Closed
@scniro
Copy link
Owner

scniro commented Jan 19, 2020

@andyrichardson @mhuggins I am a lot shorter on time these days as when I started this project. Codemirror & React APIs are moving to quickly for me to keep atop of for the day-to-day. I am looking for a co-maintainer of this project. Please contact me directly if you are interested. Thank you for understanding.

@paztis
Copy link

paztis commented Jan 27, 2021

Problem is still here 2 years after.
Someone is looking for a solution ?

@paztis
Copy link

paztis commented Jan 27, 2021

I've found a way by adding a key on the tag to force reload on props change

@ChristopherHButler
Copy link

@paztis did you find a solution? Can this be done with useRef in a functional component?

@paztis
Copy link

paztis commented Mar 8, 2021

I add a key to the react component, and the key is equal to the code value.
Like this, when the input code change, the component rendering is forced

@ChristopherHButler
Copy link

Ahhh ok thanks

@hhhluke
Copy link

hhhluke commented Aug 20, 2021

@paztis but after type in=> code change => cm re-render => the cursor disappear, how did you solve it? thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add change handling for props
Fix SSR detection for chrome extensions
6 participants
@mhuggins @paztis @andyrichardson @scniro @hhhluke @ChristopherHButler