-
Notifications
You must be signed in to change notification settings - Fork 96
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useQueryParams initialization vs. setting the params #65
Comments
In the following, you set up the functions for translating your query parameter values to and from strings (as they are represented in the URL). The argument to const [query, setQuery] = useQueryParams({
x: NumberParam,
q: StringParam,
filters: ArrayParam,
}); You can now use that setter with the configuration you defined: setQuery({ x: 123 }); This setQuery knows that I'm not sure entirely what you're trying to do in your PS, but you do not pass an "initial value" to useQueryParams, you pass a configuration object. For example const [queryParams, setQueryParams] = useQueryParams({ foo: NumberParam });
// ...
const queryParamsFromFilters = { foo: 94 };
// ...
useEffect(() => {
if (queryParamsFromFilters !== undefined) {
setQueryParams(queryParamsFromFilters);
}
}, [queryParamsFromFilters]); |
Taking your example and commenting it with the answers: // At this moment I don't have yet the initial params ready.
// They will come from other hooks in async fashion.
// So I'll have to init with {}
// const [queryParams, setQueryParams] = useQueryParams({ foo: NumberParam });
const [queryParams, setQueryParams] = useQueryParams({ });
// Once the init params are ready I want to use them to initialize useQueryParams
useEffect(() => {
setQueryParams(queryParamsFromFilters); // queryParamsFromFilters = { foo: NumberParam }
}, [queryParamsFromFilters]); A similar example would be from https://reactjs.org/docs/hooks-effect.html import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
} |
Hey :)
A quick question. In the
useQueryParams
example we have:And the question is: why on init we have
{q: StringParam}
and on set{q: 'bar'}
... I mean in the first example the value is an object, in the second example is a string.In all examples (best practices?) on https://reactjs.org/docs/hooks-overview.html a hook's init value and the set function values have the same structure.
Thank you.
PS.
I'm trying to set up
useQueryParams
inside anuseEffect
and the above behavior stops me achieve the result I want:The text was updated successfully, but these errors were encountered: