I have a component in svelte where I need to define a value inside it called oldVal, which is not bound to any html element, and initialize it to value X. The next time the component renders, I would like to update its value to X1, and this value should persist to the next render, and so. In react we use useRef for this, but how to implement this in svelte without having to write a store?
EDIT: adding some code
So, basically, I am doing transition inside the component, where I have a custom css transition function
<script>
export let tick;
export let tranX;
import {select} from 'd3-selection';
import {interpolate} from 'd3-interpolate';
// This value is initially 0 but then updated on each render
let oldVal =0;
//Custom CSS transition function
function animateX(node, {duration}){
const xTranslate = +select(node)
.attr('transform')
.split('(')[1]
.split(',')[0];//Here I extract the translate value in the x direction
const interVal =
oldVal > xTranslate
? interpolate(xTranslate , oldVal)
: interpolate(oldVal, xTranslate );
oldVal = xTranslate ; //Here I update the value, to interpolate values in the next render
return {
duration,
css: (t) => {
return `
transform:translate(${interVal(t)},0);
`;
},
};
}
</script>
<g
opacity="1"
transform="translate({tranX}, 0)"
in:animateX={{ duration: 2000 }}
>
<line y2="6" stroke="black" />
<text text-anchor="end" transform="rotate(-45)" y="20">{tick}</text>
</g>
So, basically what I want to do, is in the first render to transition g from 0 to the computed value xTranslate and then update oldValue as oldVal = xTranslate so the next render oldVal starts with xTranslate