```console.log(props.text.language?.id) val updat...
# react
p
Copy code
console.log(props.text.language?.id)

val updateText = { newText: String ->
    console.log("updateText ${props.text.language?.id}")
    props.update(props.text.copy(body = newText))
}

val cm = useCodeMirror(jsObject {
    console.log("jsObject ${props.text.language?.id}")
    container = editor.current
    basicSetup = false
    extensions = arrayOf(
        StreamLanguage.define(mai),
        defaultHighlightStyle.fallback as Any
    )
    onChange = { text, _ ->
        console.log("onChange ${props.text.language?.id}")
        updateText(text)
    }
    height = "300px"
    value = props.text.body ?: ""
})
This is in the body of functional component. When run the first time, it looks ok, all logs shows language id
1
. But, when I pass new props, something weird happens:
Copy code
2
jsObject 2
onChange 1
updateText 1
Any idea why the
onChange
and
updateText
keeps the old value?!
(The source of `useCodeMirror`: https://github.com/uiwjs/react-codemirror/blob/master/src/useCodeMirror.ts)
t
Looks like missed memoization on your side
p
What should I memoize? I'm still getting hang of this React stuff...
t
Is there doc for this library?
Example with marked fields
p
Hmm, I tried to memoize the whole
jsObject
with configuration, with dependency on language id. Didn't helped. 😞
t
Usually memoization required for option parameters
c
That doesn't look like the code of a component. You are declaring lambdas but never calling them.
The problem is probably about variable capture in closures (your external lambda has a reference on the old props, so it will never see new versions). However, it's impossible to know for sure without seeing the code that actually calls all of this (the whole component in which this takes place)
p
@CLOVIS https://pastebin.com/zXcVPM02 here is the current state of the component which still has the issue.
@turansky I've tried memoizing the
onChange
(depending on language id), and I;m still getting the old value.