Ok I’m trying out something unique. I have a component where the state of the component is an element itself (not a simple variable or array). And this state element is directly being returned.
I realize this is not in line with the general principles of React but there is a reason why I’ve made it this way.
My component is a network of different SVG paths. Each path has a ‘d’ attribute which is undergoing changes. The state of the compoenent is an element which looks something like this:
<g className='PathNetwork'>
<g>
<Path d="pathCoordinates">
<Path d="pathCoordinates">
<Path d="pathCoordinates">
</g>
<g>
<Path d="pathCoordinates">
<Path d="pathCoordinates">
<Path d="pathCoordinates">
</g>
</g>
This “Pathnetwork” is the state of the component. And so when I want to update it, I end up creating a new structure similar to the one above with new “pathCoordinates” which will be assigned to the ‘d’ property. And once that new structure is created, I will insert it into the setter of the component’s state.
It seems to be working initially, but I am finding that the path network on my page is being over-drawn….the paths are being drawn, and then drawn on top of that….the paths are literally getting brighter with each second.
I’m wondering if I am updating the state correctly. Here is the relevant code. As you can see, I am procedurally creating new path objects, and inserting them into new elements, and finally when I’m doing I am trying to replace the data in the existing state with that new element. Am I doing it correctly? :
const [pathNetwork, set_pathNetwork] = useState(createPathNetwork(props.coordinatesArr));
//PathNetwork updating hook
useEffect(()=>{
if ( props.coordinatesArr.length >=1){
updateDPropOfPaths( props.coordinatesArr) );
}
}, [ props.coordinatesArr]);
return(
<g>
{
arrOfRayPaths != null ?
arrOfRayPaths
:null
}
</g>
)
function updateDPropOfPaths(freshCoordsArr){
let compositePathsArr = pathNetwork.props.children;
let finalStruct = React.createElement('g', {}, []);
for (let x = 0; x < compositePathsArr .length; x++){
let currCompRay = compositePathsArr[x];
for(let i=0; i<freshCoordsArr.length; i++){
let currTierStruct = React.createElement('g', {}, []);
let originalIndividualPathsArr = currCompRay.props.children;
for(let c=0; c<3; c++ ){
let currPath = originalIndividualPathsArr[c];
let freshPath = createFreshPath(currPath, freshCoordsArr[i]);
currTierStruct.props.children.push(freshPath);
}
finalStruct.props.children.push(currTierStruct);
}
}
//Replacing the existing state structure with the newly created <g> element
set_pathNetwork(null);
set_pathNetwork(finalStruct);
}
