This is my code:
export default function useUser(){
var userToken = "one"
function setToken(value: string) {
userToken = value
}
return { userToken, setToken }
}
And this is my home:
export default function Home() {
const { userToken, setToken } = useUser()
console.log(userToken)
setAccessToken("two");
console.log(userToken)
}
I want to my result be: one two
But my code return: one one
The userToken is just a value output from the useUser call. As oppsed to that setToken is a function that has access to closure of useUser. To get it work as you expect add a getter method called getToken which will have access to the closure of useUser function.
function useUser() {
var userToken = "one";
function setToken(value) {
userToken = value;
}
function getToken() {
return userToken;
}
return { getToken, setToken };
}
function Home() {
const { getToken, setToken } = useUser();
console.log(getToken());
setToken("two");
console.log(getToken());
return (
<div>
{getToken()}{" "}
<button
onClick={() => {
setToken("three");
console.log(getToken());
}}
>
click me
</button>
</div>
);
}
ReactDOM.render(<Home/>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>But still, it will not re-render anything for you after the button click. This is due to how React works it only renders when state changes. You should use useState hook for that.