vyaron

export default { 
	name: 'App’, 
	setup(props, context) {
		useEventBusListener(MY_EVENT, handleMyEvent)
		useActivityTracker()
                  }
}

vyaron

function useActivityTracker() {
    const userActivityTimeout = ref(null)
    const lastUserActivityAt = ref(Date.now())

    function activateActivityTracker() {... }
    function deactivateActivityTracker() {... }
    function resetActivityTimeout() {... }
    function userActivityThrottler() {... }
    onBeforeMount(() => {
        activateActivityTracker()

vyaron

function useEventBusListener(eventName, handler) {
    onMounted(() => EventBus.$on(eventName, handler))
    onUnmounted(() => EventBus.$off(eventName, handler))
}

vyaron

async function load() {
    const id = props.match.params.id; // params -> from url
    const robot = await robotService.getRobotById(id)
    setRobot(robot)
}

useEffect(() => {
    load();
}, [props.match.params.id])

vyaron

async componentDidMount() {
    const id = this.props.match.params.id; // params -> from url
    const robot = await robotService.getRobotById(id)
    this.setState({ currentId: id, robot })
}

async componentDidUpdate(prevProps) { 
    if (prevProps && prevProps.match.params.id !== this.state.currentId) {
        const id = this.props.match.params.id; // params -> from url
        const robot = await robotService.getRobotById(id)

vyaron

useEffect(() => {
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToBuddyStatus(props.buddy.id, handleStatusChange);
    return () => {
        ChatAPI.unsubscribeFromBuddyStatus(props.buddy.id, handleStatusChange);
    };
}, [props.buddy.id]); // Only re-subscribe if props.buddy.id changes

vyaron

import React, { useState } from 'react';
function Example() {
    const [count, setCount] = useState(0);
    useEffect(() => {
      document.title = `You clicked ${count} times, dear balak`;
    }
  
  return (
        <div>
            <p> You clicked {count} times, dear balak. </p>

vyaron

useEffect(() => {
  document.title = `You clicked ${count} times`;

}, [count]); // Only re-run the effect if count changes

vyaron

function LoginForm() {
  const [user, setUser] = useState({ username: '', password:''  });
 
  const updateUserField = e => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };
  return (
    <form>
      <label>
        Username:

vyaron

import React, { useState } from 'react';
function Example() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p> You clicked {count} times, dear balak. </p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>