रिएक्ट कस्टम हुक इफ़ेक्ट कंपोज़िशन: जटिल इफ़ेक्ट ऑर्केस्ट्रेशन में महारत हासिल करना

            import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetchData;

            

              
                Copy
              
            
          

            import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

            import React from 'react';
import useFetchData from './useFetchData';
import useLocalStorage from './useLocalStorage';

function UserProfile() {
  const { data: userData, loading, error } = useFetchData('https://api.example.com/user/profile');
  const [storedUserData, setStoredUserData] = useLocalStorage('userProfile', null);

  useEffect(() => {
    if (userData) {
      setStoredUserData(userData);
    }
  }, [userData, setStoredUserData]);

  if (loading) {
    return 
Loading user profile...
;
  }

  if (error) {
    return 
Error fetching user profile: {error.message}
;
  }

  if (!userData && !storedUserData) {
    return 
No user data available.
;
  }

  const userToDisplay = storedUserData || userData;

  return (
    

      
User Profile
      
Name: {userToDisplay.name}
      
Email: {userToDisplay.email}
    
  );
}

export default UserProfile;

            

              
                Copy
              
            
          

            import { useState, useEffect, useRef } from 'react';

function useWebSocket(url) {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const retryCount = useRef(0);

  useEffect(() => {
    const connect = () => {
      const newSocket = new WebSocket(url);

      newSocket.onopen = () => {
        console.log('WebSocket connected');
        setIsConnected(true);
        retryCount.current = 0;
      };

      newSocket.onclose = () => {
        console.log('WebSocket disconnected');
        setIsConnected(false);
        // Exponential backoff for reconnection
        const timeout = Math.min(3000 * Math.pow(2, retryCount.current), 60000);
        retryCount.current++;
        console.log(`Reconnecting in ${timeout/1000} seconds...`);
        setTimeout(connect, timeout);
      };

      newSocket.onerror = (error) => {
        console.error('WebSocket error:', error);
      };

      setSocket(newSocket);
    };

    connect();

    return () => {
      if (socket) {
        socket.close();
      }
    };
  }, [url]);

  return { socket, isConnected };
}

export default useWebSocket;

            

              
                Copy
              
            
          

            import { useEffect } from 'react';

function useEventListener(socket, eventName, handler) {
  useEffect(() => {
    if (!socket) return;

    const listener = (event) => handler(event);

    socket.addEventListener(eventName, listener);

    return () => {
      socket.removeEventListener(eventName, listener);
    };
  }, [socket, eventName, handler]);
}

export default useEventListener;

            

              
                Copy
              
            
          

            import React, { useState } from 'react';
import useWebSocket from './useWebSocket';
import useEventListener from './useEventListener';

function WebSocketComponent() {
  const { socket, isConnected } = useWebSocket('wss://echo.websocket.events');
  const [message, setMessage] = useState('');
  const [receivedMessages, setReceivedMessages] = useState([]);

  useEventListener(socket, 'message', (event) => {
    setReceivedMessages((prevMessages) => [...prevMessages, event.data]);
  });

  const sendMessage = () => {
    if (socket && isConnected) {
      socket.send(message);
      setMessage('');
    }
  };

  return (
    

      
WebSocket Example
      
Connection Status: {isConnected ? 'Connected' : 'Disconnected'}
       setMessage(e.target.value)}
        placeholder="Enter message"
      />
      
        Send
      
      
Received Messages:
      

        {receivedMessages.map((msg, index) => (
          
{msg}
        ))}
      
    
  );
}

export default WebSocketComponent;

            

              
                Copy
              
            
          

            import { useState, useEffect } from 'react';

function useUserData(userId) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setUserData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [userId]);

  return { userData, loading, error };
}

export default useUserData;

            

              
                Copy
              
            
          

            import { useState, useEffect } from 'react';

function useUserPosts(userId) {
  const [userPosts, setUserPosts] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!userId) {
      setUserPosts(null);
      setLoading(false);
      return;
    }

    const fetchPosts = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}/posts`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setUserPosts(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, [userId]);

  return { userPosts, loading, error };
}

export default useUserPosts;

            

              
                Copy
              
            
          

            import React, { useState } from 'react';
import useUserData from './useUserData';
import useUserPosts from './useUserPosts';

function UserProfileWithPosts() {
  const [userId, setUserId] = useState(1); // Start with a default user ID
  const { userData, loading: userLoading, error: userError } = useUserData(userId);
  const { userPosts, loading: postsLoading, error: postsError } = useUserPosts(userId);

  return (
    

      
User Profile with Posts
      User ID:
       setUserId(parseInt(e.target.value, 10))}
      />

      {userLoading ? 
Loading user data...
 : null}
      {userError ? 
Error loading user data: {userError.message}
 : null}
      {userData ? (
        

          
User Details
          
Name: {userData.name}
          
Email: {userData.email}
        
      ) : null}

      {postsLoading ? 
Loading user posts...
 : null}
      {postsError ? 
Error loading user posts: {postsError.message}
 : null}
      {userPosts ? (
        

          
User Posts
          

            {userPosts.map((post) => (
              
{post.title}
            ))}
          
        
      ) : null}
    
  );
}

export default UserProfileWithPosts;

            

              
                Copy
              
            
          

            import { useIntl, FormattedDate } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  const now = new Date();

  return (
    

      
Current Date: 
      
Current Date (German): 
    
  );
}

export default MyComponent;

            

              
                Copy