i've been working on a react app and i thought that the react dev tools is only available on the dev version of the app but i was surprised that I can use it on the production version, can even change routes and states and other stuff. And I don't want to completely disable react dev tools from the app (by adding a script to the index.html to unload it). So what i wanna do is disable editing on the react dev tools like in facebook.com's (you can open the react dev tools there but you can't edit any prop or state which is cool) So is there any good way to do it without disabling the whole react dev tools ?
You can't and you shouldn’t. Dev tools meant to build for development purposes, hence why should someone make it available in production.
Your only option is to remove the devtools completely with this code:
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
Or you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering:
#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}
Anyway it would be still a good practice to put the business logic and the sensitive data back to your server.