I want to make some project with Recoil (quite beginner) and use atom, selector, selectorFamily etc.. and I got some issues when use selectorFamily I checked quite several times and use GPT, find similar questions..but I can't solve what problem is... the error was
Warning: React has detected a change in the order of Hooks called by Playlists.
here's code
import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import {
accessTokenState,
detailClickedInfoState,
isClickedState,
selectedMusicValState,
} from "../../recoil";
import { browseHandler } from "../../recoil";
import { detailTrackHandlerState } from "../../recoil/store";
const Playlists: React.FC = () => {
const [isClicked, setIsClicked] = useRecoilState(isClickedState);
const [selectedVal, setSelectedVal] = useRecoilState(selectedMusicValState);
const [clickedDetailInfos, setClickedDetailInfos] = useRecoilState(
detailClickedInfoState
);
const accessToken = useRecoilValue<any>(accessTokenState);
const [playlistsData, setPlaylistsData] = useState<any>("");
const detailTracks = selectedVal
? useRecoilValue(detailTrackHandlerState(selectedVal))
: selectedVal; --> here's problem
useEffect(() => {
if (accessToken) {
const playlistsResultData = browseHandler(
accessToken,
"featured-playlists"
);
playlistsResultData.then((data) => setPlaylistsData(data));
}
console.log(detailTracks);
}, [accessToken, selectedVal]);
and the recoil code is
export const detailTrackHandlerState = selectorFamily({
key: "detailTrackHandlerState",
get:
(detailTrack: any) =>
async ({ get }) => {
const token = get(accessTokenState);
let trackParameters = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
};
const responseData = await fetch(
`${SPOTIFY_URL}/playlists/${detailTrack}/tracks?limit=15`,
trackParameters
).then((res) => res.json());
return responseData;
},
});