adamkleingit

const VirtualScroll = ({
  renderItem,
  itemCount,
  viewportHeight,
  rowHeight,
  nodePadding,
}) => {
  const totalContentHeight = itemCount * rowHeight;

  let startNode = Math.floor(scrollTop / rowHeight) - nodePadding;

adamkleingit

import {useCurrentLocale, LocaleSwitcher} from 'reusable-locale';

const Comp1 = () => {
  const currentLocale = useCurrentLocale(); // Using a global store from external lib
}

const Comp2 = () => {
  return <LocaleSwitcher/>; // External components using the same global store
}

adamkleingit

import {createStore} from 'reusable';

const useTodos = createStore(() => useState([]));

const Comp = () => {
  const todosCount = useTodos(
    ([todos]) => todos.length
  );
  ...
};

adamkleingit

import {ReusableProvider} from 'reusable';

export const App = () => (
  <ReusableProvider>
    { /* App Components */ }
  </ReusableProvider>
);

adamkleingit

import {useCurrentUser} from '../stores/currentUser.store';

const Comp1 = () => {
  const { user } = useCurrentUser();
  ...
}

const Comp2 = () => {
  const { user } = useCurrentUser(); // Same user
  ...

adamkleingit

import {createStore} from 'reusable';

export const useLocale = createStore(() => useState('en'));
export const useSomething = createStore(() => useReducer(...));

adamkleingit

import {createStore} from 'reusable';

export const useCurrentUser = createStore(() => {
  const [user, setUser] = useState({...});
  ...
  return {
    user,
    ...
  }
});

adamkleingit

const useStore = () => {
  const { store } = useContext(ReactReduxContext);

  return store;
};

const useSelector = selector => {
  const store = useStore();

  const prevState = selector(store.getState());

adamkleingit

"Redux forces you to write good code" - I've heard that sentence many times.
In fact - it's quite easy to write bad code with Redux, as I've seen many times.

In this talk I will show some bad practices and techniques with Redux, and how to avoid them.

adamkleingit

(automatically generated from npm)