Skip to content

Instantly share code, notes, and snippets.

View avivbiton's full-sized avatar

Aviv Biton avivbiton

3 followers · 0 following
View GitHub Profile
@avivbiton
avivbiton / cloudSettings
Last active August 8, 2021 15:43 — forked from conorbuck/angle-between-points.js
JavaScript: Find the angle between two points
{"lastUpload":"2021-08-08T15:43:56.511Z","extensionVersion":"v3.4.3"}
@avivbiton
avivbiton / refactorWithUseReducer.js
Created August 27, 2019 08:52
refactored with useReducer
function ComponentExample({ defaultArray }) {
const [items, dispatchItems] = useReducer(itemReducer,
{
array: [],
index: 0,
defaultArrayLength: 0
});
@avivbiton
avivbiton / infiniteLoopIssue.js
Created August 27, 2019 08:37
this will cause infinite loop
function ComponentExample({ defaultArray }) {
const [array, setArray] = useState([]);
const [arrayIndex, setArrayIndex] = useState(0);
const [arrayLength, setArrayLength] = useState(0);
useEffect(() => {
array.splice(0, arrayLength);
setArrayIndex(0);
setArray([...defaultArray, ...array]);
@avivbiton
avivbiton / defaultArrayPropChange.js
Created August 27, 2019 08:33
now when defaultArray prop change, the array correctly updates
function ComponentExample({ defaultArray }) {
const [array, setArray] = useState([]);
const [arrayIndex, setArrayIndex] = useState(0);
useEffect(() => {
setArrayIndex(0);
setArray(defaultArray);
}, [defaultArray]);
@avivbiton
avivbiton / withDefaultArray.js
Created August 27, 2019 08:15
with defaultArray
function ComponentExample({ defaultArray })
const [array, setArray] = useState([defaultArray]);
@avivbiton
avivbiton / moreComplexState.js
Created August 27, 2019 08:11
example for my blog post
function ComponentExample() {
const [array, setArray] = useState(["a"]);
const [arrayIndex, setArrayIndex] = useState(0);
const changeItem = useCallback((indexIncrease) => {
const newIndex = arrayIndex + indexIncrease;
if (newIndex >= array.length || newIndex < 0) return;
setArrayIndex(newIndex);
}, [arrayIndex, array]);
@avivbiton
avivbiton / exampleUseReducer.js
Created August 27, 2019 07:54
useReducer example
export default function Example() {
const [someState, dispatchState] = useReducer(stateReducer, initialState);
return (
<div>
<button className="button"
onClick={() => dispatchState({
type: UPDATE_SOME_DATA,
payload: "newdata"
@avivbiton
avivbiton / containerComponentExample.js
Last active July 23, 2019 09:51
A container that passes down a single prop to all of the children.
function ContainerComponent({ someProp, children }) {
const withProps = React.Children.map(children, child => React.cloneElement(child, { someProp }));
return <>{withProps}</>;
}
<ContainerComponent someProp={value}>
<ComponentA />
<ComponentA />
<ComponentA />
<ComponentA />
@avivbiton
avivbiton / samePropExample.js
Created July 23, 2019 09:40
An example of sending the same prop everytime to multiple instances of the same component type
<ComponentA someProp={value} />
<ComponentA someProp={value} />
<ComponentA someProp={value} />
<ComponentA someProp={value} />