Skip to content

Instantly share code, notes, and snippets.

View NeoYo's full-sized avatar
🛵
Welcome

Neo NeoYo

🛵
Welcome
View GitHub Profile
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->
@NeoYo
NeoYo / react.index.d.ts
Last active September 17, 2021 13:12
How to Use React useEffect - Declare
// react/index.d.ts
type DependencyList = ReadonlyArray<any>;
function useEffect(effect: EffectCallback, dep?: DependencyList): void;
@NeoYo
NeoYo / counter.jsx
Created September 17, 2021 13:16
How to Use React useEffect - Counter Demo
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
}, []);
return <h1>{count}</h1>;
@NeoYo
NeoYo / comment-list.jsx
Created September 17, 2021 13:22
How to Use React useEffect - Request data
function CommentsList() {
const [comments, setComments] = useState([]);
useEffect(() => {
// Fetch Comments
fetchComments().then(response => {
// ...
setComments(response.data);
});
}, []);
return (
@NeoYo
NeoYo / page-selector.js
Created September 17, 2021 13:26
How to Use React useEffect - PageSelector
function PageSelector() {
const [page, setPage] = useState(1);
useEffect(() => {
// Get page params from URLSearchParams
const urlParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
// Update page state if exist
if (params?.page) {
setPage(params.page);
}