Skip to content

Instantly share code, notes, and snippets.

@markerikson
markerikson / reactiflux-chat-react-hooks-storage.md
Created September 14, 2019 00:31
Reactiflux chat log: How does React store hooks on Fibers?

[12:14 AM] acreddy : are hooks value stored in fiber?

[10:40 AM] ghardin137 : not really

[10:50 AM] acemarke : @acreddy, @ghardin137 : yes they are, actually.

A "fiber" is a plain JS object that React uses to store bookkeeping information on each rendered component in the tree. The linked list of hooks is indeed stored as a field on the fiber for that component

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
items.push(elements[i]);
}
}
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active September 11, 2025 12:12
DOM Performance (Reflow & Repaint) (Summary)

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
  • Builds CSSOM tree from the css rules.
var emojis = [
'๐Ÿ˜„','๐Ÿ˜ƒ','๐Ÿ˜€','๐Ÿ˜Š','โ˜บ','๐Ÿ˜‰','๐Ÿ˜','๐Ÿ˜˜','๐Ÿ˜š','๐Ÿ˜—','๐Ÿ˜™','๐Ÿ˜œ','๐Ÿ˜','๐Ÿ˜›','๐Ÿ˜ณ','๐Ÿ˜','๐Ÿ˜”','๐Ÿ˜Œ','๐Ÿ˜’','๐Ÿ˜ž','๐Ÿ˜ฃ','๐Ÿ˜ข','๐Ÿ˜‚','๐Ÿ˜ญ','๐Ÿ˜ช','๐Ÿ˜ฅ','๐Ÿ˜ฐ','๐Ÿ˜…','๐Ÿ˜“','๐Ÿ˜ฉ','๐Ÿ˜ซ','๐Ÿ˜จ','๐Ÿ˜ฑ','๐Ÿ˜ ','๐Ÿ˜ก','๐Ÿ˜ค','๐Ÿ˜–','๐Ÿ˜†','๐Ÿ˜‹','๐Ÿ˜ท','๐Ÿ˜Ž','๐Ÿ˜ด','๐Ÿ˜ต','๐Ÿ˜ฒ','๐Ÿ˜Ÿ','๐Ÿ˜ฆ','๐Ÿ˜ง','๐Ÿ˜ˆ','๐Ÿ‘ฟ','๐Ÿ˜ฎ','๐Ÿ˜ฌ','๐Ÿ˜','๐Ÿ˜•','๐Ÿ˜ฏ','๐Ÿ˜ถ','๐Ÿ˜‡','๐Ÿ˜','๐Ÿ˜‘','๐Ÿ‘ฒ','๐Ÿ‘ณ','๐Ÿ‘ฎ','๐Ÿ‘ท','๐Ÿ’‚','๐Ÿ‘ถ','๐Ÿ‘ฆ','๐Ÿ‘ง','๐Ÿ‘จ','๐Ÿ‘ฉ','๐Ÿ‘ด','๐Ÿ‘ต','๐Ÿ‘ฑ','๐Ÿ‘ผ','๐Ÿ‘ธ','๐Ÿ˜บ','๐Ÿ˜ธ','๐Ÿ˜ป','๐Ÿ˜ฝ','๐Ÿ˜ผ','๐Ÿ™€','๐Ÿ˜ฟ','๐Ÿ˜น','๐Ÿ˜พ','๐Ÿ‘น','๐Ÿ‘บ','๐Ÿ™ˆ','๐Ÿ™‰','๐Ÿ™Š','๐Ÿ’€','๐Ÿ‘ฝ','๐Ÿ’ฉ','๐Ÿ”ฅ','โœจ','๐ŸŒŸ','๐Ÿ’ซ','๐Ÿ’ฅ','๐Ÿ’ข','๐Ÿ’ฆ','๐Ÿ’ง','๐Ÿ’ค','๐Ÿ’จ','๐Ÿ‘‚','๐Ÿ‘€','๐Ÿ‘ƒ','๐Ÿ‘…','๐Ÿ‘„','๐Ÿ‘','๐Ÿ‘Ž','๐Ÿ‘Œ','๐Ÿ‘Š','โœŠ','โœŒ','๐Ÿ‘‹','โœ‹','๐Ÿ‘','๐Ÿ‘†','๐Ÿ‘‡','๐Ÿ‘‰','๐Ÿ‘ˆ','๐Ÿ™Œ','๐Ÿ™','โ˜','๐Ÿ‘','๐Ÿ’ช','๐Ÿšถ','๐Ÿƒ','๐Ÿ’ƒ','๐Ÿ‘ซ','๐Ÿ‘ช','๐Ÿ‘ฌ','๐Ÿ‘ญ','๐Ÿ’','๐Ÿ’‘','๐Ÿ‘ฏ','๐Ÿ™†','๐Ÿ™…','๐Ÿ’','๐Ÿ™‹','๐Ÿ’†','๐Ÿ’‡','๐Ÿ’…','๐Ÿ‘ฐ','๐Ÿ™Ž','๐Ÿ™','๐Ÿ™‡','๐ŸŽฉ','๐Ÿ‘‘','๐Ÿ‘’','๐Ÿ‘Ÿ','๐Ÿ‘ž','๐Ÿ‘ก','๐Ÿ‘ ','๐Ÿ‘ข','๐Ÿ‘•','๐Ÿ‘”','๐Ÿ‘š','๐Ÿ‘—','๐ŸŽฝ','๐Ÿ‘–','๐Ÿ‘˜','๐Ÿ‘™','๐Ÿ’ผ','๐Ÿ‘œ','๐Ÿ‘','๐Ÿ‘›','๐Ÿ‘“','๐ŸŽ€','๐ŸŒ‚','๐Ÿ’„','๐Ÿ’›','๐Ÿ’™','๐Ÿ’œ','๐Ÿ’š','โค','๐Ÿ’”','๐Ÿ’—','๐Ÿ’“','๐Ÿ’•','๐Ÿ’–','๐Ÿ’ž','๐Ÿ’˜','๐Ÿ’Œ','๐Ÿ’‹','๐Ÿ’','๐Ÿ’Ž','๐Ÿ‘ค','๐Ÿ‘ฅ','๐Ÿ’ฌ','๐Ÿ‘ฃ','๐Ÿ’ญ','๐Ÿถ','๐Ÿบ','๐Ÿฑ','๐Ÿญ','๐Ÿน','๐Ÿฐ','๐Ÿธ','๐Ÿฏ','๐Ÿจ','๐Ÿป','๐Ÿท','๐Ÿฝ','๐Ÿฎ','๐Ÿ—','๐Ÿต','๐Ÿ’','๐Ÿด','๐Ÿ‘','๐Ÿ˜','๐Ÿผ','๐Ÿง','๐Ÿฆ','๐Ÿค','๐Ÿฅ','๐Ÿฃ','๐Ÿ”','๐Ÿ','๐Ÿข','๐Ÿ›','๐Ÿ','๐Ÿœ','๐Ÿž','๐ŸŒ','๐Ÿ™','๐Ÿš','๐Ÿ ','๐ŸŸ','๐Ÿฌ','๐Ÿณ','๐Ÿ‹','๐Ÿ„','๐Ÿ','๐Ÿ€','๐Ÿƒ','๐Ÿ…','๐Ÿ‡','๐Ÿ‰','๐ŸŽ','๐Ÿ','๐Ÿ“','๐Ÿ•','๐Ÿ–','๐Ÿ','๐Ÿ‚','๐Ÿฒ','๐Ÿก','๐ŸŠ','๐Ÿซ','๐Ÿช','๐Ÿ†','๐Ÿˆ','๐Ÿฉ','๐Ÿพ',