ReactJS SOLID Principle　~ DIP (Dependency Inversion Principle)~

・The dependency that imports an extra module should depend on the abstract interface, but not the concrete one. Because this makes it easy to modify the application, while an application that depends on a concrete interface might collapse immediately. Here is an example using the swr . import useSWR from ' swr ' const fetcher = async ( url ) => { const res = await fetch ( url ) return res . json () } export const Todo = () => { const { data } = useSWR ( ' https://jsonplaceholder.typicode.com/todos ' , fetcher ) if ( ! data ) return < p > loading .... < /p > return ( < ul > { data . map (( todo ) => { return ( < li > < span > { todo . id } < /span > < span > { todo . title } < /span > < /li > ); })} < /ul > ) } The snippet above has several issues. ・Fetches data within the Todo component. ・The Todo component depends on the concrete interface. Let's consider if we convert the swr to the react-query that provides superior functionality than swr . Can we do it easily? Here are several issu