From 677ec3397ccc9d38334ea576aaf763e8a00c6571 Mon Sep 17 00:00:00 2001 From: Valentyn Vasylevskyy Date: Sun, 16 Feb 2025 17:42:22 +0200 Subject: [PATCH] added some docs --- frameworks_libs/React/_interview-questions.md | 190 ++++++++++++++++++ js/JS-design-patterns | 42 ++++ js/JS-general.md | 9 + 3 files changed, 241 insertions(+) create mode 100644 frameworks_libs/React/_interview-questions.md create mode 100644 js/JS-design-patterns diff --git a/frameworks_libs/React/_interview-questions.md b/frameworks_libs/React/_interview-questions.md new file mode 100644 index 0000000..db59766 --- /dev/null +++ b/frameworks_libs/React/_interview-questions.md @@ -0,0 +1,190 @@ +# React Interview Questions + +## Tasks + +### Task 1 + +Please fetch products from this api +It's a simple GET api, no options required loop through data and render product title you can find types in type.ts file + +- Senior position only: + + Implement pagination to navigate through the product list + Use the query parameters `limit` and `skip` to handle pagination add controls to paginate through the list add validation to those controls + +
+ + Answer + + ```tsx + import { useEffect, useState } from 'react'; + import { ApiResponse } from '../types'; + + export function Task1() { + const [data, setData] = useState(null); + const [page, setPage] = useState(0); + const [pageLength, setPageLength] = useState(10); + + const products = data?.products ?? []; + + const isPreviousDisabled = !data || page <= 0; + const isNextDisabled = !data || products.length < pageLength; + + useEffect(() => { + const limit = pageLength; + const skip = (page + 1) * pageLength; + + fetch(`https://dummyjson.com/products?limit=${limit}&skip=${skip}`) + .then((res) => res.json()) + .then((res: ApiResponse) => { + setData(res); + }); + }, [page, pageLength]); + + function handleNextClick() { + if (products.length < pageLength) return; + setPage((page) => page + 1); + } + + function handlePreviousClick() { + if (page <= 0) return; + setPage((page) => page - 1); + } + + function handlePageLengthChange(value: string) { + // possible TODOs: debounce and validation + const parsedValue = +value; + setPageLength(parsedValue >= 1 ? parsedValue : 1); + } + + return ( +
+
+ TASK 1: +
+ + handlePageLengthChange(e.target.value)} + /> +
Page: {page + 1}
+
    + {products.map((product) => ( +
  • {product.title}
    • + ))} +
+ + +
+ ); + } + ``` + +
+ +### Task 2 + +Please create a stopwatch number should update every second you don't need to format number +Add start, stop and reset buttons. + +- on start click - start timer +- on stop click - stop timer and do not reset number +- on reset click - stop timer and reset number + +
+ + Answer + + ```tsx + // This task can be done via both, `useRef` and `useEffect`. Commented code is related to `useEffect` only. + + import { useState, useRef } from 'react'; + + export function Task2() { + const [time, setTime] = useState(0); + const timerRef = useRef(null); + + + useEffect(() => { + return () => { + if (timerRef.current) { + clearInterval(timerRef.current); + } + }; + }, []); + + // const [start, setStart] = useState(false); + + // useEffect(() => { + // if (!start) return; + // const interval = setInterval(() => { + // setTime((time) => time + 1); + // }, 1000); + + // return () => { + // clearInterval(interval); + // }; + // }, [start]); + + function startTimer() { + if (timerRef.current) return; + + timerRef.current = setInterval(() => { + setTime((time) => time + 1); + }, 1000); + + // if (start) return; + // setStart(true); + } + + function stopTimer() { + if (!timerRef.current) return; + + clearInterval(timerRef.current); + timerRef.current = null; + + // if (!start) return; + // setStart(false); + } + + function resetTimer() { + stopTimer(); + setTime(0); + } + + return ( +
+
+ TASK 2: +
+ Time: {time} + + + +
+ ); + } + + ``` + +
diff --git a/js/JS-design-patterns b/js/JS-design-patterns new file mode 100644 index 0000000..77dbcb5 --- /dev/null +++ b/js/JS-design-patterns @@ -0,0 +1,42 @@ +# JavaScript Design Patterns + +- Creational Patterns +- Structural Patterns +- Behavioral Patterns + +## Links + +- +- + +## Creational Patterns + +- `Abstract Factory` Creates an instance of several families of classes +- `Builder` Separates object construction from its representation +- `Factory Method` Creates an instance of several derived classes +- `Prototype` A fully initialized instance to be copied or cloned +- `Singleton` A class of which only a single instance can exist + +## Structural Patterns + +- `Adapter` Match interfaces of different classes +- `Bridge` Separates an object’s interface from its implementation +- `Composite` A tree structure of simple and composite objects +- `Decorator` Add responsibilities to objects dynamically +- `Facade` A single class that represents an entire subsystem +- `Flyweight` A fine-grained instance used for efficient sharing +- `Proxy` An object representing another object + +## Behavioral Patterns + +- `Chain of Resp.` A way of passing a request between a chain of objects +- `Command` Encapsulate a command request as an object +- `Interpreter` A way to include language elements in a program +- `Iterator` Sequentially access the elements of a collection +- `Mediator` Defines simplified communication between classes +- `Memento` Capture and restore an object's internal state +- `Observer` A way of notifying change to a number of classes +- `State` Alter an object's behavior when its state changes +- `Strategy` Encapsulates an algorithm inside a class +- `Template` Method Defer the exact steps of an algorithm to a subclass +- `Visitor` Defines a new operation to a class without change diff --git a/js/JS-general.md b/js/JS-general.md index 996a41a..3ad95cb 100644 --- a/js/JS-general.md +++ b/js/JS-general.md @@ -3,6 +3,11 @@ TODO: review and update general docs +## Books + +- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) (free) +- [Eloquent JavaScript](https://eloquentjavascript.net/) (free) + ## Interview questions links - [awesome-interview-questions](https://github.com/MaximAbramchuck/awesome-interview-questions) @@ -36,6 +41,10 @@ TODO: review and update general docs - web api (timers, XHR, DOM etc.) - event loop, callback queue - promise, micro-tasks + - functional programming + - Higher order functions + - Currying + - First Order functions - function, class - class vs function