Ability to pass functions in state object with useNavigate()

[kghosein]

Recently I encountered a situation where I had to pass a function in state object, but it turns out that you can only pass serializable data in state object, so I had to pass the function as a string and dangerously invoke it with eval() in the receiving component.

Why functions cannot be passed in the state object and what are the implications involved with passing functions? Does it has been ignored deliberately?

[brophdawg11]

That's due to the underlying history API: https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API#the_pushstate_method

The state object can be anything that can be serialized

[kghosein]

Alright, but any suggestions if eval() or Function() constructor can avoided or any work around (because passing function is inevitable)? Every one on the internet talks about the security risks involved with eval() or Function() constructor but never talks about any solutions especially in reference to React.

MDN do suggests using indirect eval() and there's also a stackoverflow thread (but without any solution that can actually be picked).

[brophdawg11]

It depends on the use case but personally I'd try to find a way to avoid needing a function and instead pass data through state