useQueryParams initialization vs. setting the params

[metamn]

Hey :)

A quick question. In the useQueryParams example we have:

const [query, setQuery] = useQueryParams({
    x: NumberParam,
    q: StringParam,
    filters: ArrayParam,
  });
  const { x: num, q: searchQuery, filters = [] } = query;

setQuery(
            { x: Math.random(), filters: [...filters, 'foo'], q: 'bar' },
            'push'
          )

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 an useEffect and the above behavior stops me achieve the result I want:

const [queryParams, setQueryParams] = useQueryParams({});

  useEffect(() => {
    if (queryParamsFromFilters !== undefined) {
      setQueryParams(queryParamsFromFilters); // This causing an URL like http://localhost:3000/?location=%5Bobject%20Object%5D&q=%5Bobject%20Object%5D
    }
  }, [queryParamsFromFilters]);

[pbeshai]

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 useQueryParams is a configuration object. This configuration is used to create a setter that will update the URL the way you'd like.

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 x is a NumberParam, so it knows to encode it to "123" and to decode it to 123.

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]);

[metamn]

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';
}