How can I return multiple useState or functions with custom hook?

Hi @dai-shi , I’m very interested about your library I also used to use react-global-state-hook. Now I move to React-tracked and I have a question about it I want to return count1 and setCountOrig1, delPosts also. What can I do? thanks you

//custom hook  I used to do like this before:
return {
   delPosts ,
    count, 
    setCoun,
    count1,
    setCountOrig1 
  };

Example :

import { createContainer } from 'react-tracked';
const useValue = () => {
  const [count, setCountOrig] = useState(0);
  const [count1, setCountOrig1] = useState(0);

  const setCount = (nextCount: number) => {
    // eslint-disable-next-line no-console
    console.log({ nextCount });
    setCountOrig(nextCount);
  };

  //delete posts
  const delPosts = useCallback(
    async id => {
      const newData = filter(dataPosts?.data, o => o.id !== id);
      mutatePosts({ ...dataPosts, data: [...newData] });
      await api.delPosts(id);
      //refetch
      refreshPosts();
    },
    [dataPosts, mutatePosts, refreshPosts]
  );
  return [count, setCount] as const;

const { Provider, useTracked } = createContainer(useValue);

[dai-shi]

@seanblonien Would you quickly review #127? Yeah, I too noticed that useCallback is necessary.

[dai-shi]

Great. And, I noticed the subtle concurrent rendering support is “off” by default 😓 , because it behaves a little weirdly in the legacy mode.

So, I think it’s worth documenting as a recipe.