add useEffect hook for fetching recipe data

- Implemented useEffect to fetch recipes from the API
- Fetched recipe data from 'https://dummyjson.com/recipes'
- Updated state with fetched recipes and handled potential errors

app/components/RecipeGrid.jsx

@@ -6,3 +6,16 @@ import RecipeCards from './RecipeCards';
 const RecipeGrid = () => {
   const [recipes, setRecipes] = useState([]);
 
+  useEffect(() => {
+    const fetchRecipes = async () => {
+      try {
+        const response = await fetch('https://dummyjson.com/recipes');
+        const data = await response.json();
+        setRecipes(data.recipes);
+      } catch (error) {
+        console.error('Error fetching recipes:', error);
+      }
+    };
+
+    fetchRecipes();
+  }, []);